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中，默认情况下在内容div上有1em填充。您可以通过添加以下CSS来摆脱它：

.ui-content{
    padding: 0;
}

jquery移动单选按钮组 - 垂直 - 适合100％的屏幕宽度

1 个答案: