html - 另一个 Divs vs Tables 问题 : Forms

Question

[Meta-note:] 我正在浏览问题页面，真的厌倦了“DIVS 与表格”“何时使用表格与 DIVS”“Divs 是否比表格更好”“表格与 CSS”以及所有的问题问同样的问题 OMG PEOPLE 但我想看看人们处理“为什么你应该放弃并使用表格”的典型例子的翻译的所有方式:

<table>
  <tr>
    <td> Name </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> Social Security Number </td>
    <td> <input> </td>
  </tr>
</table>

问题: 如何在没有表格的情况下最好地(语义上、简单地、稳健地、流畅地、可移植地)实现上述内容。对于初学者来说，我想一个天真的实现对第一列使用固定的列宽，但对于动态生成的内容可能会产生不确定的结果。在答案中包括您的方法的优点/缺点会很好。

附言另一个我很想知道的问题是垂直居中，但是在 jakpsatweb.cz 中很好地介绍了它的技巧。

编辑:scunlife 举了一个很好的例子来说明为什么我没有仔细考虑问题。表格可以同时对齐多列。问题仍然存在(我希望看到用于对齐/布局的不同 CSS 技术)- 尽管可以处理他的解决方案？更复杂的例子绝对是首选。

Answer 1

我通常做的是:

<form>
 <label for="param_1">Param 1</label>
 <input id="param_1" name="param_1"><br />
 <label for="param_2">Param 2</label>
 <input id="param_2" name="param_2"><br />
</form>

在 CSS 中:

label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }

当然，你得根据自己的实际数据来定义宽度:-)

• 首先给label，输入display: block，这样就可以给它分配大小，并排好序了。
• 它们都得到 float: left 因为 Explorer 做事的方式有点不同
• 很好地格式化标签
• 破解 br 以便在某处有一个 clear: left，我记得将它放在标签上在某些浏览器上不起作用。

此外，使用 br，即使浏览器不支持 CSS，您也可以获得漂亮的格式:-)