Группа радиокнопок jquery для мобильных устройств - вертикальная - для размещения на 100% ширины экрана

Question

https://scontent-b-fra.xx.fbcdn.net/hphotos-frc3/t1.0-9/10153116_10152268900798463_5881076589768218411_n.jpg

<div class=" ui-grid-a " id="drinksTable" ><!--first row-->
        <div class="ui-block-a " >
            <div class="picsContainer " >
                <div data-role="fieldcontain"  > 
                    <fieldset data-role="controlgroup"   data-mini="false" data-theme="b" style="width: 98%; " data-corners="false"> 
                        <legend style="text-align: center ; ">abc</legend>
                        <input type="radio" name="radio-strength" id="radio-view-a" value="aa" data class="blabla" style="background-color: #BF8F54;"/>
                        <label  for="radio-view-a" >aa</label>
                        <input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="bb"   checked="checked"/>
                        <label for="radio-view-b" >bb</label>
                        <input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="cc"  />
                        <label for="radio-view-c" >cc</label>
                    </fieldset>
                </div>
            </div>

        </div>
        <div class="ui-block-b ">
            <div class="picsContainer"  >
                <div data-role="fieldcontain"  >
                    <fieldset data-role="controlgroup"  data-theme="b" data-mini="false" style="width: 98%" data-corners="false">
                        <legend >dbv</legend>
                        <input type="radio" name="radio-temp" id="radio-view-d" value="dd" data />
                        <label for="radio-view-d">dd</label>
                        <input type="radio" name="radio-temp" id="radio-view-e" value="ee"   checked="checked"/>
                        <label for="radio-view-e">ee</label>
                        <input type="radio" name="radio-temp" id="radio-view-f" value="ff"  />
                        <label for="radio-view-f">ff</label>
                    </fieldset>
                </div>
            </div>
        </div>

по какой-то причине переключатели на изображении выше имеют отступы / поля слева и справа (выделены красным цветом на рисунке)

Как мне от этого избавиться? кто родительский контейнер? (Я думаю, это и есть причина). Самое главное, как мне заставить их соответствовать всей ширине экрана (но оставить поле между кнопками)

надеюсь, это достаточно ясно... спасибо.

Answer 1

В jQuery Mobile по умолчанию добавляется 1em для содержимого div. Вы можете избавиться от этого, добавив следующий CSS:

.ui-content{
    padding: 0;
}