标题中的单选按钮

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 fieldset { display：inline; margin-left：auto; margin-right：auto; 宽度：100％; }

这里是如何看起来像：

当我尝试标签宽度限制在20％，我得到这个：

Answer 1

的问题在此布局是您正在使用的标题单选按钮......我想两个或更多的CSS被包括到你的单选按钮中的jquery生成的div ...无论是使用navbar为它或实现自定义CSS禁用包括在您的单选按钮的第二个CSS类...

Answer 2

.centerFieldset {文本-居中对齐;显示：块;浮动：左}

Answer 3

你可以试试这个

.centerFieldset {文本对齐：中心;显示：块;浮动：左}}

.centerFieldset字段集{宽度：100％}

它应该工作