0

ユーザーがさまざまなリストビューから選択できるようにするいくつかのラジオボタンを備えたヘッダーがあります。私はそれを変更することができないので、それは一行になります。4 つのボタンの幅が画面サイズより大きく、各入力の幅を制限できません。

その部分のコードは次のとおりです。

<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 フィールドセット { 表示: インライン; マージン左: 自動; マージン右: 自動; 幅:100%; }

これがどのように見えるかです：

ここに画像の説明を入力

ラベルの幅を 20% に制限しようとすると、次のようになります。

ここに画像の説明を入力

4

3 に答える 3

1

.centerFieldset { text-align: center; 表示ブロック; フロート:左}

于 2012-07-17T11:24:00.553 に答える
1

このレイアウトの問題は、ヘッダーでラジオ ボタンを使用していることです...2 つ以上の css がラジオ ボタンの jquery で生成された div に含まれていると思います... navbar を使用するか、カスタム css を実装して 2 番目を無効にしますラジオボタンに含まれるcssクラス...

于 2012-07-17T11:40:32.460 に答える
0

これを試してもらえますか

.centerFieldset { text-align: center; 表示ブロック; フロート:左 }}

.centerFieldset フィールドセット { 幅:100% }

それは動作するはずです

于 2012-07-17T11:39:08.680 に答える