2

水平ラジオ ボタンを全幅に伸ばす方法。

<fieldset data-role="controlgroup" data-type="horizontal"  class="row_b"> 


 <input type="radio" name="q2" id="q2_0" value="0" checked="checked" />
            <label for="q2_0">C</label>
            <input type="radio" name="q2" id="q2_1" value="1" />
            <label for="q2_1">s</label>
            <input type="radio" name="q2" id="q2_2" value="2" />
            <label for="q2_2">P</label>


    </fieldset>

CSS

.row_b .ui-btn {
    text-align: center;
    width: 33.3%;
}

このリンクを確認した後、3つのラジオボタンに上記の方法を設定しようとしました.. http://jsfiddle.net/6rCmY/1/しかし、まだ機能していません。

4

2 に答える 2

0

これを試して:

.row_b .ui-btn {
    text-align: center;
    width: 33%;
}

width パラメーターを 33% に変更したところ、テスト後に正しく表示されました。

于 2013-01-08T12:40:01.707 に答える
0

画面幅全体を埋めるために、.row_b の内部コンテナー ( .ui-controlgroup-controls ) を作成する必要があります (特に jqm の data-role="controlgroup" を適用する場合)。

したがって、試してください:

.row_b .ui-controlgroup-controls { 
    width: 100%; 
}
.row_b .ui-btn { 
    text-align: center;
    width: 33.3333%;
}

CSS3 の代替:

.row_b .ui-controlgroup-controls {
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    width: 100%;
}
.row_b .ui-radio {
    text-align: center;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
}
于 2013-04-11T09:20:27.497 に答える