Question

我正在努力学习如何编写正确的CSS来定位一些数据输入表单。我不确定这样做的“正确”方法是什么。

我正在尝试为以下内容创建布局的示例：

Last Name        Middle Initial            First Name            DOB
|||||||||||||    ||||||                    ||||||||||||||||      ||||||||||

City         State         Zip
||||||||     ||||          |||||||||

基本上我有我的标签和|||代表我的表单元素（文本框，下拉列表等）。我不知道为这些元素创建类的正确方法，而不仅仅创建一次使用类来指定仅适用于这些元素的特定宽度。

另外，如何正确对齐所有这些元素以及每行多个项目？我需要浮动每个元素吗？

我会做类似的事情吗？

<div class="last-name">
   <div class="label">
       <label>Last Name</label>
   </div>
   <div class="field">
       <input type="text" />
   </div>
</div>

<div class="middle-initial">
   <div class="label">
       <label>Middle INitial</label>
   </div>
   <div class="field">
       <input type="text" />
   </div>
</div>

...

<div class="clear"></div>

last-name和middle-initial等都是可以使用一次并浮动到左侧的类。我不确定这是不是一个好的方式去做？有没有更好的方法用CSS进行这种定位，所以我可以避免使用表格？

Answer 1

我会选择使用fieldsets标记此特定布局：

<form>
  <fieldset class="personal">
    <label>
      <span>Last Name</span>
      <input type="text" ... />
    </label>
    <label>
      <span>Middle Initial</span>
      <input type="text" ... />
    </label>
    ...
  </fieldset>
  <fieldset class="address">
    <label>
      <span>City</span>
      <input type="text" ... />
    </label>
  </fieldset>
</form>

我float所有labels，spans或inputs使用display:block，大部分内容应该落实到位。

Answer 2

IMO，这是表格数据。

我认为使用<table>并不一定会感到羞耻。

相关讨论：Proper definition for "tabular data" in HTML

Answer 3

这是我的没有表格的版本：http://jsfiddle.net/dy4bv/5/（增加一点HTML部分以适应所有字段）

也许它会有所帮助。

Answer 4

您可以随时使用display:table和display:table-cell。

所以使用上面的示例代码，你会做这样的事情

div.last-name, div.middle-initial{
    display:table-cell;
    padding:1em;
}

示例： http://jsfiddle.net/5LBgp/

修改

从@Pekka和@Pete Wilson的答案中添加更多上下文：

我预见这个样式的两个大问题是table

如果您想要更改样式，则需要删除HTML，甚至可能完全重做。如果您使用div s。
，您的代码将会更加友好
屏幕阅读器等可能会弄得一团糟，而不是理解桌子不是真正的桌子。

Answer 5

当您正在布局的数据表时，使用表格布局并不是一件坏事！这就是你在这里，imo：一张桌子。所以，为自己保留一些悲伤并以此方式对待它。我们已经被CSS纯粹主义者和语义网络疯子所震撼了，我认为钟摆摆得太远了：现在我们把自己束缚在结束我们的布局上。或者至少我这样做。我花了太多时间试图避免表格布局。

结果是我的很多页面都要进行浏览器检查。额外的时间（嘿！80-20规则再次！）处理浏览器怪癖的方式比应有的多。我已经节省了很多时间，并且拥有更强大的页面，如果我只是想一点点，而不是每次都使用永不任何表，始终是纯CSS的解决方案。表格处理在每个浏览器中都像摇滚一样坚固，没有任何问题，也没有任何挫折感。

只是我的经验。

Answer 6

我不是网络开发人员，但我有一个破解。

http://jsfiddle.net/dy4bv/28/

这是基于@ Samich的设计，但是我没有使用散布着魔法清除div的一堆div，而是将行分成ul中的项目。我使用标签来表达温暖的模糊语义。通过制作标签和字段div inline-block来完成样式，因此它们从左向右流动，但标签和字段本身block，因此它们垂直堆叠（这是一个非常粗略的想法，我知道）。正如@zzzzBov指出的那样，您可以使用字段ID来关闭宽度。

Answer 7

不，那是不是表格数据。如果你想知道某些东西是表格数据，这是一个测试：表格标题是什么？

至于布局，每当我得到一些我无法铺设的东西时，我会备份并询问设计是否是问题，在这种情况下，我认为这个问题的答案是：是的。

这是一个用户友好的设计吗？没有。如果存在提交错误，则扫描很困难并且用户识别错误的速度很慢。

Luke Wroblewski在他的博客和他的书Web Form Design: Filling in the Blanks中有关于如何设计人性化形式的一些很好的信息。

Answer 8

只是卸下这2个便士......

第一列是“PropertyDescription”，第二列是“PropertyValue”，而每一行都是“Property”项目 - voilà，一张桌子！

仍然喜欢CSS，但这当然可以归类为表格数据。

CSS＆amp;表格 - 抵制去表格布局的冲动

8 个答案: