0

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

这是该部分的代码：

<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 字段集 { 显示：内联；左边距：自动；边距右：自动；宽度：100%；}

这是它的样子：

在此处输入图像描述

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

在此处输入图像描述

4

3 回答 3

1

.centerFieldset { 文本对齐：中心；显示：块；向左飘浮 }

于 2012-07-17T11:24:00.553 回答
1

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

于 2012-07-17T11:40:32.460 回答
0

你能试试这个吗

.centerFieldset { 文本对齐：中心；显示：块；向左飘浮 }}

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

它应该有效

于 2012-07-17T11:39:08.680 回答