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 回答