jquery - 将多个 radio 控制组对齐到左侧具有相同的距离

Question

我有几个 radio 控制组，它们位于彼此之下并动态创建。到目前为止，他们到左边的距离是由他们的图例文本的长度决定的，这看起来很奉承。

        <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”类应用了“宽度”，希望这会将所有控制组向右移动相同数量的像素。但这并没有发生。如何对齐控制组以使它们到左侧的距离相同？

干杯

Answer 1

使用以下 CSS 来对齐标签:

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

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