[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 技术)- 尽管可以处理他的解决方案?更复杂的例子绝对是首选。
最佳答案
我通常做的是:
<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,您也可以获得漂亮的格式:-)
关于html - 另一个 Divs vs Tables 问题 : Forms,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/339210/