標題中的單選按鈕

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％}

它應該工作