12

[元注释：] 我正在浏览问题页面，真的厌倦了“DIVS 与表格”“何时使用表格与 DIVS”“Div 是否比表格更好”“表格与 CSS”以及所有提出相同问题的问题天哪，人们，但我想看看人们处理“为什么你应该放弃和使用表格”的规范示例的翻译的所有方式：

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

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

PS 另一个我很想知道的是垂直居中，但在jakpsatweb.cz上很好地涵盖了这方面的技巧

编辑： sculife 提出了一个很好的例子，说明为什么我没有仔细考虑这个问题。表格可以同时对齐多个列。问题仍然存在（我希望看到用于对齐/布局的不同 CSS 技术） - 尽管可以处理他的解决方案？更多涉及的例子肯定是首选。

4

5 回答 5

11

我通常做的是：

<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 和 input display: block，这样它就可以被分配一个大小并被排列起来。
  • 他们都得到了float: left因为 Explorer 做的事情有点不同
  • 很好地格式化标签
  • 破解br以便有一个clear: left地方，我记得把它放在标签上在某些浏览器上不起作用。

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

于 2008-12-04T00:21:42.410 回答
5

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

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

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

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

如果您真的想这样做，我会查看The Man In Blue 的解决方案，它运行良好且非常干净。

于 2008-12-04T00:36:36.653 回答
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。

于 2008-12-29T15:53:37.223 回答
3

尽管其他建议可能更适合获得灵活的布局，但该问题的字面答案类似于：

<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 或更早版本，但“渐进增强”等等。

于 2008-12-29T17:14:59.150 回答
0

我在想类似的东西：

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

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

于 2008-12-04T00:35:07.577 回答