另一个 div 与表格的问题：表格

Question

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

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

问题： 如何在没有表格的情况下最好地（语义上、简单地、稳健地、流畅地、便携地）实现上述内容。对于初学者，我猜一个幼稚的实现对第一列使用了固定的列宽，但这对于动态生成的内容可能会产生不确定的结果。在答案中包含您方法的优势/劣势会很好。

附：另一个我很想知道的是垂直居中，但在jakpsatweb.cz

编辑：sunlife 提出了一个很好的例子，说明为什么我没有仔细考虑问题。表格可以同时对齐多个列。问题仍然存在（我希望看到用于对齐/布局的不同 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; }

当然，您必须根据实际数据定义宽度:-)

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

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

Answer 2

诀窍是当表单变得比您的示例更复杂时，您会意识到表格启用了其他元素无法做到的“灵活网格”。

例如如果“输入”比文本框更复杂怎么办？例如一堆单选按钮，每个按钮都有自己的标签：

Color: [____Red___][v]
 Hood: [*] 
 Size: (_) Small
       (_) Medium
       (_) Large
       (*) X-Large

如果您只需要简单的表单，CSS 就很棒，但只要您需要网格，事情就会变得有趣...

如果你真的想这样做，我会查看The Man In Blue's Solution，它工作得很好而且很干净。

Answer 3

人们谈论表格让他们的表格以他们想要的方式显示，这是真的，只有当你想在列中显示你的表格并且愿意失去语义意义时。有了以下 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 即可完成上述所有操作。

当涉及到单选、复选框和提交按钮时，它会稍微复杂一些，但是可以使用 css 以您想要的方式显示干净的语义 HTML。

Answer 4

虽然其他建议可能更适合获得灵活的布局，但这个问题的字面答案是这样的：

<form action="www.example.com">
    <div class="table">
        <div class="tbody">
          <div class="tr">
            <div class="td"> <label for="name">Name</label> </div>
            <div class="td"> <input id="name"> </div>
          </div>
          <div class="tr">
            <div class="td"> <label for="ssn">Social Security Number</label> </div>
            <div class="td"> <input id="ssn"> </div>
          </div>
        </div>
    </div>
</form>

与

    <style type="text/css">
        div.table { display:table; border-spacing:2px; }
        div.tbody { display:table-row-group; }
        div.tr { display:table-row; }
        div.td { display:table-cell; vertical-align: middle; padding:1px; }
    </style>

这适用于最新版本的 Firefox、Chrome、Opera 和 Safari。它也适用于 IE8 Beta 2（标准模式）。它不适用于 IE7 或更早版本，但“渐进增强”等等。

Answer 5

我在想这样的事情：

<div style="text-align:right; float:left;">
    Name: <input /> <br />
    Social Security Number: <input /> <br />
</div>

如果右列是固定长度的，可以与可变文本长度对齐，但我想知道这种方法的缺点是什么？