另一个Divs vs Tables问题：表单
[元注意：]我正在浏览问题页面，对“DIVS vs Tables”感到非常厌倦“何时使用表格与DIVS”“Div比表格更好”“表格与CSS”以及所有提问相同的问题尽管OMG PEOPLE，但我想看看人们处理翻译“为什么要放弃和使用表格”的典型例子的所有方式：
<table>
<tr>
<td> Name </td>
<td> <input> </td>
</tr>
<tr>
<td> Social Security Number </td>
<td> <input> </td>
</tr>
</table>
问题：如何最好地（语义上，简单，健壮，流畅，便携）在没有表格的情况下执行上述操作。 对于初学者，我想一个天真的实现为第一列使用固定的列宽，但是对于动态生成的内容可能会有不确定的结果。 在答案中包括你的方法的长处/短处会很好。
PS另一个我很想知道很多是垂直居中，但对于这个黑客在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; }
当然，你必须根据你的实际数据来定义宽度:-)
display: block ，以便它可以被分配一个大小并排队。 float: left因为Explorer做的事情有点不同 br ， clear: left一个clear: left某个地方，我记得把它放在标签上并不适用于某些浏览器。 此外，与br你即使浏览器不支持CSS :-)一个很好的格式
诀窍是，当表单变得比你的示例更复杂时，你会意识到表格使得一个没有其他元素能够做到的“灵活网格”。
例如，如果“输入”比文本框更复杂？ 例如一堆单选按钮，每个按钮都有自己的标签：
Color: [____Red___][v]
Hood: [*]
Size: (_) Small
(_) Medium
(_) Large
(*) X-Large
如果你需要的只是简单的表单，CSS非常棒，但只要你需要一个网格，事情就会变得有趣......
如果你真的想这样做，我会检查蓝色的解决方案，它工作得很好，非常干净。
人们会谈论表格，让他们的表格显示他们想要的方式，这是真的，只有当您想要以列显示表格并且愿意失去语义时。 使用以下HTML代码，可以按照您希望的布局显示此表单。
顺便说一句 - 不对<br />
<form>
<fieldset>
<legend>Personal Info</fieldset>
<div>
<label for="name">Name</label>
<input id="name" name="name" />
</div>
<div>
<label for="ssn">Social Security Number</label>
<input id="ssn" name="ssn" />
</div>
</fieldset>
</form>
您可以清除<divs>或将它们设置为overflow: hidden以确保浮点数被清除。
来自以上html的选项：
Name |==============| SSN |==============|
Name |==============|
SSN |==============|
Name |==============|
SSN |==============|
Name |==============|
SSN |==============|
Name: |==============|
SSN: |==============|
Name:
|==============|
SSN:
|==============|
以上所有内容都可以通过几行css来完成。
当涉及到广播，复选框和提交按钮时，它会变得更复杂一些，但干净的语义HTML可以按照您希望使用css的方式显示。
链接地址: http://www.djcxy.com/p/88179.html