标题中的单选按钮

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 {文本对齐:居中；}

.centerFieldset字段集{ display: inline；margin left: auto；margin right: auto；width:100%；}

下面是它的外观：

​

​

当我尝试将标签宽度限制为20%时，得到的结果如下：

​

​

Answer 1

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

Answer 2

.centerFieldset {文本对齐:居中；显示:块；浮动:左}

Answer 3

你能试试这个吗？

.centerFieldset {文本对齐:居中；显示:块；浮动:左}}

宽度字段集{ .centerFieldset :100%}

它应该可以工作