1

互いに下にあり、動的に作成されたいくつかの無線制御グループがあります。これまで、左への距離は、お世辞に見える凡例テキストの長さによって与えられます。

        <div id="datum_grp" data-role="fieldcontain" data-type="horizontal"><a class="grpLegend">Datum:</a><fieldset id="datum_1_fields" data-role="controlgroup" data-type="horizontal" class="forceinline"></fieldset><fieldset id="datum_2_fields" data-role="controlgroup" data-type="horizontal" class="forceinline"></fieldset></div>
    <div id="zeit_grp" data-role="fieldcontain"><a class="grpLegend">Stunden:</a><fieldset id="zeit_1_fields" data-role="controlgroup" data-type="horizontal" class="forceinline"></fieldset><fieldset id="zeit_2_fields" data-role="controlgroup" data-type="horizontal" class="forceinline"></fieldset></div>

これにより、コントロールグループが満たされます。

for (var iFirstDigit = 0; iFirstDigit < 3; iFirstDigit++) {
            // fill radio controlgroup for date: first digit
            $('#datum_1_fields').append('<input type="radio" name="datum_1" id="' + iFirstDigit + '" display_text="' + iFirstDigit + '"></input><label for="' + iFirstDigit + '">' + iFirstDigit + '</label>').controlgroup('refresh');
            $('#datum_grp').trigger('create');
        }
        for (var iSecondDigit = 0; iSecondDigit < 10; iSecondDigit++) {
            $('#datum_2_fields').append('<input type="radio" name="datum_2" id="' + iSecondDigit + '" display_text="' + iSecondDigit + '"></input><label for="' + iSecondDigit + '">' + iSecondDigit + '</label>').controlgroup('refresh');
            $('#datum_grp').trigger('create');
        }
for (var iFirstDigit = 0; iFirstDigit < 3; iFirstDigit++) {
            $('#zeit_1_fields').append('<input type="radio" name="zeit_1" id="' + iFirstDigit + '" display_text="' + iFirstDigit + '"></input><label for="' + iFirstDigit + '">' + iFirstDigit + '</label>').controlgroup('refresh');
            $('#zeit_grp').trigger('create');
        }
        // fill radio controlgroup for hours (second digit)
        for (var iSecondDigit = 0; iSecondDigit < 10; iSecondDigit++) {
            $('#zeit_2_fields').append('<input type="radio" name="zeit_2" id="' + iSecondDigit + '" display_text="' + iSecondDigit + '"></input><label for="' + iSecondDigit + '">' + iSecondDigit + '</label>').controlgroup('refresh');
            $('#zeit_grp').trigger('create');
        }

ご覧のとおり、コントロール グループのインデントは同じではありませんが、凡例テキストの長さに関連しています。

そこで、クラス「grpLegend」に「幅」を適用すると、すべてのコントロールグループが同じ量のピクセルだけ右にシフトすることを期待しました。しかし、これは起こっていません。すべてのコントロール グループが左に同じ距離になるようにするにはどうすればよいでしょうか?

乾杯

4

1 に答える 1

3

以下の CSS を使用して、ラベルを揃えます。

#zeit_grp a,#datum_grp a {
    width:100px;
    display:inline-block
}

例: http://jsfiddle.net/H5mMu/6/

于 2013-03-22T11:38:28.243 に答える