html - 在 HTML 中布局数据输入表单 : table or no table?

Question

我想创建一个如下所示的数据输入表单:

Name:    [ Name textbox ]
Age:     [ Age textbox  ]
label n: [ textbox n    ]

标签左对齐，文本框左对齐。我知道我可以在 table 元素中执行此操作，但我也知道“表格应该只用于表格数据”。虽然我部分同意/不同意该声明 - 我想知道我想要的布局是否可以/应该被视为“表格数据”，以及在没有数十行复杂交叉的情况下产生相同结果的替代布局是什么 -浏览器 CSS。

我目前不怎么从事 Web 开发(当我从事 UI 工作时，现在有一段时间严格来说是 WinForms)，所以我很感激可能有一个优雅的解决方案。可能涉及一个无序列表，其中项目符号点已关闭并且有点偏离标签->字段 y 位置偏移，也许？

Answer 1

带有 label 元素的无序列表应该是这里的方式。我将使用的标记应该类似于:

<form id="person" method="post" action="process.php">
    <ul>
        <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li>
        <li><label for="age">Age: </label><input id="age" name="age" type="text" /></li>
        <li><label for="n">N: </label><input id="n" name="n" type="text" /></li>
    </ul>
</form>

这个 CSS if 得到类似于你想要的东西:

#person ul {
    list-style: none;
}

#person li {
    padding: 5px 10px;
}

#person li label {
    float: left;
    width: 50px;
    margin-top: 3px;
}

#person li input[type="text"] {
    border: 1px solid #999;
    padding: 3px;
    width: 180px;
}

参见:http://jsfiddle.net/tZhUQ/1 ，其中包含一些您可以尝试的更有趣的东西。