Question

我有一个包含4个文本框的表单，一个复选框和一个左侧带有标签的选择。这是我的代码：

<fieldset class="form-field">
        <legend>
            <label class="form-field k-checkbox">Parent Material</label>
        </legend>
        <ul class="form-field">
            <li>
                <label for="use_test_certificate" class="form-field">Use Test Certificate</label>
                <input type="checkbox" name="use_test_certificate" class="k-checkbox form-field" />
            </li>
            <li>
                <label for="parent_material" class="form-field">Material</label>
                <select name="parent_material" class="form-field"></select>
            </li>
            <li>
                <label for="proof_stress" class="form-field">0.2% Proof Stress</label>
                <input type="text" name="proof_stress" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field" />
            </li>
            <li>
                <label for="do_weld_calculation" class="form-field">Do Weld Calculation</label>
                <input type="checkbox" name="do_weld_calculation" class="k-checkbox form-field" />
            </li>
            <li>
                <label for="weld_redistribution_factor" class="form-field">Weld Redistribution Factor</label>
                <input type="text" name="weld_redistribution_factor" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field" />
            </li>
        </ul>
    </fieldset>

问题在于复选框显示在复选框旁边而不是在其标签旁边。当我增加窗口大小时，它会跳到我的第一个文本框旁边。我怎么能告诉它在它的标签旁边显示。我不是CSS专家。我通常可以为自己解决问题，但这个让我完全不知所措。任何帮助表示赞赏。

阿曼达

Answer 1

看到你没有展示你的CSS，我不妨只使用表单元素向你展示理想的解决方案：）

请注意我已将name属性更改为id。 id必须是唯一的，用于通过标签label属性识别相应的for。

Have a look at this fiddle!

CSS

fieldset {
    width: 500px;
}
label {
    display: block;
    float: left;
    clear: left;
    width: 200px;
    margin: 10px;
}
input, select {
    display: block;
    float: left;   
    margin: 10px;
}
input[type=text] {
    width: 170px;
}

HTML

<fieldset class="form-field">
    <legend>Parent Material</legend>
        <label for="use_test_certificate" class="form-field">Use Test Certificate</label>
        <input type="checkbox" id="use_test_certificate" class="k-checkbox form-field" />

        <label for="parent_material" class="form-field">Material</label>
        <select id="parent_material" class="form-field"></select>

        <label for="proof_stress" class="form-field">0.2% Proof Stress</label>
        <input type="text" id="proof_stress" maxlength="23" class="k-textbox form-field" />

        <label for="do_weld_calculation" class="form-field">Do Weld Calculation</label>
        <input type="checkbox" id="do_weld_calculation" class="k-checkbox form-field" />

        <label for="weld_redistribution_factor" class="form-field">Weld Redistribution Factor</label>
        <input type="text" id="weld_redistribution_factor" maxlength="23" class="k-textbox form-field" />
</fieldset>

在页面上对齐输入控件

1 个答案: