html - 排列 HTML 元素时遇到问题

Question

我正在设计一个带有多个标签和输入控件的表单。它们不一定适合表格形式，因为列不会在每一行中对齐。

因此，例如，它可能看起来像这样:

Label1:  Label2:             Label3:
[Input1] [Input2           ] [Input3             ]

Label4:          Label5:
[Input4        ] [Input5           ]

Label6:          Label7:             Label8:
[Input6        ] [Input7           ] [Input8 ]

最大的问题是我希望标签始终与输入控件左对齐。任何人都可以就设计此样式的最佳方式提出一些建议吗？现有示例将是完美的!

我考虑过的技术包括使用表格， float <div> s，以及两者的组合。我越来越接近了，但它有很多标记，我不确定它是否适合所有浏览器。

感谢任何提示。

Answer 1

我建议您在开始使用 CSS 进行任何设计之前，首先应该为您的表单找到最佳结构。原因是您将损害没有/禁用其 CSS 的用户。参见 Progressive Enhancement .

这样想:

1. 我是在制作表格数据吗？不？那么它可能只是 <label> 的列表和 <input>对
2. 它们应该按顺序列出吗？然后使用 <ol>不？然后使用 <ul> .
3. 所有这些列表都相互关联吗？不？然后将它们包裹在 <fieldset> 中不是 <div>小号
4. 即使没有任何图像或 CSS，它们也能正常工作吗？不？然后从第 1 步开始迭代。

一些需要考虑的事情:

1. <table>应该只用于表格数据，不用于任何布局。参见 Why tables for layout is stupid .
2. <input>和 <label>默认情况下都是行内元素，这意味着它们会自动对齐。所以使用 float:left或 display: inline-block不会有帮助，而是会产生另一个您以后必须处理的问题。
3. <div> (也称为 <span>) 应该始终是最后一个选项。参见 Semantics .

示例:

为了让你把它们描绘出来，这里是输出:

没有 CSS 的标记:

使用 CSS 标记:

语义标记:

<form action="" method="">
    <fieldset>
        <legend>Title of this set: </legend>
        <ol>
            <li>
                <label for="input1">Label1: </label>
                <input type="text" id="input1" size="31" />
            </li>
            <li>
                <label for="input2">Label2: </label>
                <input type="text" id="input2" size="31" />
            </li>
            <li>
                <label for="input3">Label3: </label>
                <input type="text" id="input3" size="31" />
            </li>
        </ol>
    </fieldset>
    <fieldset>
        <legend>Title of this set: </legend>
        <ol>
            <li>
                <label for="input4">Label4: </label>
                <input type="text" id="input4" size="31" />
            </li>
            <li>
                <label for="input5">Label5: </label>
                <input type="text" id="input5" size="31" />
            </li>
            <li>
                <label for="input6">Label6: </label>
                <input type="text" id="input6" size="31" />
            </li>
        </ol>
    </fieldset>
    <fieldset>
        <legend>Title of this set: </legend>
        <ol>
            <li>
                <label for="input7">Label7: </label>
                <input type="text" id="input7" size="31" />
            </li>
            <li>
                <label for="input8">Label8: </label>
                <input type="text" id="input8" size="31" />
            </li>
            <li>
                <label for="input9">Label9: </label>
                <input type="text" id="input9" size="31" />
            </li>
        </ol>
    </fieldset>
</form>

CSS 代码:

ol {
    margin-right: 1em;
    padding-left: 0;
}
li {
    display: inline-block;
}
fieldset {
    border: 0;
}
input {
    display: block;
}
legend {
    display: none;
}

补充说明:

1. 我们收录了一个 size=31因为它将至少为在字段中输入数据的用户提供更多可查看空间。
2. <form>即使在 CSS 不可用或关闭时仍然可用。
3. <legend>帮助用户理解字段之间的关系。