Question

我希望屏幕上显示以下布局：

FieldName 1             [Field input 1]
FieldName 2 is longer   [Field input 2]
    .                         .
    .                         .
FieldName N             [Field input N]

要求：

字段名称和字段输入必须在左边缘对齐
两列都必须动态调整其内容的大小
必须使用跨浏览器

我觉得这个布局使用HTML表格非常简单，但是因为我看到很多CSS纯粹主义者坚持只将表格用于表格数据，我想我会发现是否有办法用CSS做到这一点

Answer 1

我不会，我会用一张桌子。这是表格布局的典型示例 - 正是用于假设的表格的类型。

Answer 2

我认为大多数答案都缺少原始提问者希望列宽取决于内容宽度的要点。我认为使用纯CSS执行此操作的唯一方法是使用'display：table'，'display：table-row'和'display：table-cell'，但IE不支持。但我不确定这个属性是否可取，我发现创建一个宽列，因为只有一个长字段名称使得布局不那么美观且难以使用。在我看来，包裹的线条很好，所以我认为我刚才建议的答案不正确可能是要走的路。

Robertc's example是理想的，但是如果你真的必须使用表格，我认为通过使用<th>字段名称可以使它更加“语义”。我不确定这个，所以如果我错了，请有人纠正我。

<table>
    <tr><th scope="row"><label for="field1">FieldName 1</label></th>
        <td><input id="field1" name="field1"></td></tr>
    <tr><th scope="row"><label for="field2">FieldName 2 is longer</label></th>
        <td><input id="field2" name="field2"></td></tr>
    <!-- ....... -->
</table>

更新：我没有密切关注这一点，但IE8显然支持CSS表，所以有些人建议我们应该开始使用它们。有一个article on 24 ways，其中包含最后的相关示例。

Answer 3

最好还是使用列表

     <fieldset class="classname">
        <ul>
            <li>
                <label>Title:</label>
                <input type="text" name="title" value="" />
            </li>
        </ul>
     </fieldset>

设置li标签宽度足够宽，用于标签和输入，并将标签浮动到左侧。

也可以通过表格来实现那个表格，你可以将标签宽度设置为与强制所有标签的最大字段名一样大，或者扩展那个宽度。

[edit]这是对a list apart

的一些好读物

Answer 4

目前尚不清楚它是表格数据，正如其他人所评论的那样，尽管它可能是。表将暗示各列中所有项之间的语义关系（除了“它们都是数据库列的所有名称”之外）。无论如何，我以前就是这样做的：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Form layout</title>
    <style type="text/css">
        fieldset {width: 60%; margin: 0 auto;}
        div.row {clear: both;}
        div.row label {float: left; width: 60%;}
        div.row span {float: right; width: 35%;}
    </style>
</head>
<body>
    <form action="#" method="post">
        <fieldset>
            <legend>Section one</legend>
            <div class="row">
                <label for="first-field">The first field</label>
                <span><input type="text" id="first-field" size="15" /></span>
            </div>
            <div class="row">
                <label for="second-field">The second field with a longer label</label>
                <span><input type="text" id="second-field" size="10" /></span>
            </div>
            <div class="row">
                <label for="third-field">The third field</label>
                <span><input type="text" id="third-field" size="5" /></span>
            </div>
            <div class="row">
                <input type="submit" value="Go" />
            </div>
        </fieldset>
    </form>
</body>
</html>

编辑：似乎'按设计'我无法回答对我的回答的评论，显然这在某种程度上不那么令人困惑。因此，在回复26的评论中的第17条时 - 60％的宽度是完全可选的，默认情况下，fieldset将继承包含元素的宽度。当然，你也可以使用min-width和max-width，或任何表格布局规则，如果只有IE支持它们，但这不是CSS失败的悲惨;）

Answer 5

此标记和CSS大致达到了您在此问题的限制下的既定目标......

提案

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>My Form</title>
    <style type="text/css">
        #frm1 div {float: left;}
        #frm1 div.go {clear: both; }
        #frm1 label, #frm1 input { float: left; clear: left; }
    </style>
</head>
<body>
    <form id="frm1" action="#" method="post">
        <fieldset>
            <legend>Section One</legend>
            <div>
               <label for="field1">Name</label>
               <label for="field2">Address, City, State, Zip</label>
               <label for="field3">Country</label>
            </div>
            <div>
               <input type="text" id="field1" size="15" />
               <input type="text" id="field2" size="20" />
               <input type="text" id="field3" size="10" />
            </div>
            <div class="go">
                <input type="submit" value="Go" />
            </div>
        </fieldset>
    </form>
</body>
</html>

优点

......但我不建议使用它。这个解决方案的问题是

在瘦浏览器宽度上非常烦人的整列包裹
它将标签与标记中的相关输入字段分开

上面的解决方案应该（我还没有验证这一点）易于访问，因为我读过的屏幕阅读器在将标签与输入字段关联时使用for=""属性做得很好。因此，视觉上和可访问性方面都有效，但您可能不希望将所有标签与输入字段分开列出。

<强>结论

制作的问题 - 特别是要求将不同长度标签的整列宽度自动调整为最大标签长度 - 将标记解决方案偏向于表格。如果没有这个要求，那么有一些很好的语义解决方案来呈现表单，正如本主题中其他人所提到和建议的那样。

我的观点是：有多种方式可以以愉快，可访问和直观的方式呈现表单和收集用户输入。如果你找不到可以满足你的最低要求但是表可以的CSS布局，那么就使用表格。

Answer 6

FieldName对象应包含在SPAN中，其样式属性为float：left，宽度足以容纳标签。

输入应包含在样式为float：left的范围内。在每个字段输入后放置<div style="clear: both"/>或<br/>以打破浮动。

您可以将上述对象包含在div中，其宽度样式属性设置对于标签和输入都足够宽，以便“表格”保持较小且包含。

示例：

<span style="float: left; width: 200px">FieldName1</span><span style="float: left"><input/><br/>

<span style="float: left; width: 200px">FieldName2</span><span style="float: left"><input/><br/>

<span style="float: left">FieldName3</span><span style="float: left"><input/><br/>

Answer 7

每一行都被视为一个'div'，其中包含两个'span'，一个用于fieldname，另一个用于输入。在两个跨度上设置'float：left'。但是，您需要为“fieldname”span设置一些宽度。

另外，设置div的样式以包含属性'clear：both'以便预防。

如何使用CSS而不是HTML表来实现这种基于表的布局？

7 个答案: