麻烦安排HTML元素

Question

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

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

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

Label4:          Label5:
[Input4        ] [Input5           ]

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

最大的问题是我希望标签始终与输入控件左对齐。任何人都可以就这个风格的最佳方式提出一些建议吗？一个现有的例子是完美的！

我考虑过的技术包括使用表格，浮动<div>以及两者的组合。我已经接近了，但它有很多标记，我不相信它是接近所有浏览器的好方法。

感谢您的任何提示。

Answer 1

我建议您在使用CSS跳转到任何设计之前先找到最适合您表单的结构。原因是你会损害没有/禁用CSS的用户。请参阅Progressive Enhancement。

想一想：

1. 我是否制作表格数据？没有？那么它可能只是<label>和<input>对的列表
2. 他们应该按订单列出吗？然后使用<ol>否？然后使用<ul>。
3. 所有这些列表是否相互关联？没有？然后将它们包裹在<fieldset>而不是<div> s
中
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. 即使CSS不可用或已关闭，<form>仍可使用。
3. <legend>可帮助用户了解彼此之间的字段关系。

Answer 2

制作标签inline-block元素，并为其指定与相关输入相匹配的宽度。

Answer 3

我认为最好的解决方案是将每行输入包装在自己的div中，然后将每个输入和标签分别包装在ITS自己的div中，这样可以很容易地对齐标签。

以下是一个示例：http://jsfiddle.net/5zNHj/24/

Answer 4

这是我通过使用CSS和一些基本的HTML知识快速完成的工作。可能不是最漂亮的方式，但编码肯定很快。我在代码中添加了注释，以便相对清楚地解释自己（希望如此）。随意问任何问题我会尽力帮助你，即使我还是初学者。祝好运！ http://jsfiddle.net/Cwca22/Z2ySD/