Question

我有几个无线电控制组，它们彼此相邻并动态创建。到目前为止，它们向左的距离是由它们看起来很讨人喜欢的传说文本的长度给出的。

        <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/

将多个无线电控制组对齐，使其与左侧的距离相同

1 个答案: