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

干杯

最佳答案

使用以下CSS对齐标签：

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

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