标题中的单选按钮

Question

我有一个带有几个单选按钮的标题，让用户可以在不同的列表视图之间进行选择。我无法改变它，所以它在一行。四个按钮的宽度大于屏幕尺寸，我无法限制每个输入的宽度。

以下是该部分的代码：

<div data-role="header" data-theme="b" data-position="fixed" style="height:45px;width:100%;">
<div class="centerFieldset">

    <fieldset class="radioBtn" data-role="controlgroup" data-type="horizontal" style="margin-top:1px;">
        <label for="flow" >Rivers</label> 
        <input class="type" type="radio" name="radio" id="flow" value="flow"
            onClick="javascript:changeFlow()" <?php print $flow_selected;?> />
        <label for="lake" >Lakes</label> 
        <input class="type" type="radio" name="radio" id="lake" value="lake"
            onClick="javascript:changeLakes()" <?php print $lake_selected;?> />
        <label for="meteo" >Meteo</label>
        <input class="type" type="radio" name="radio" id="meteo" value="meteo"
            onClick="javascript:changeMeteo()" <?php print $meteo_selected;?>/>
        <label for="tableau" >Tableau</label>
        <input class="type" type="radio" name="radio" id="tableau" value="tableau"
            onClick="javascript:changeMeteo()" />
    </fieldset>
</div>
</div>

CSS文件是：

.centerFieldset {     text-align：center; }

.centerFieldset fieldset {     显示：内联;     margin-left：auto;     margin-right：auto;     宽度：100％; }

以下是它的样子：

当我尝试将标签宽度限制为20％时，我得到了这个：

Answer 1

.centerFieldset {text-align：center;显示：块; float：left}

Answer 2

这个布局中的问题是你在标题上使用单选按钮...我认为你的单选按钮中的jquery生成的div中包含了两个或更多的css ...要么使用navbar，要么实现自定义css禁用单选按钮中包含的第二个css类...

Answer 3

你可以试试这个

吗？

.centerFieldset {text-align：center;显示：块; float：left}}

.centerFieldset fieldset {width：100％}

应该有效