Question

假设我在某些页面上有以下布局：

               Title: Some Title   
              Author: Some Author   
Author Date of Birth: Date of birth

注意：

左侧文字右对齐且粗体。
用于几个不同的页面。
右侧可以包含输入控件。

在这种情况下应用最合适的方法是什么？我可以想到几个选项（假设CSS在外部样式表中应用）：

表格

简单，容易，但我不确定这会被认为是对表的好用。

<table>
 <tr>
  <td>Title</td>
  <td>Some Title</td>
 </tr>
</table>

Div + Classes

我觉得这是一个将患有神经炎和分类症的病例合二为一。

<div class="information">
 <div class="title">Title</div><div class="value">Some Title</div>
</div>

Container Div

这感觉更像是正确的道路，但我不确定。

<div class="information">
 <strong>Title</strong> <span>Some Title</span>
</div>

建议？

Answer 1

我认为这里有一个很好的语义选择是dl（描述列表）元素。

http://developers.whatwg.org/grouping-content.html#the-dl-element

<dl>
    <dt>Title</dt>
    <dd>Some Title</dd>

    <dt>Author</dt>
    <dd>Some Author</dd>

    <dt>Author Date of Birth</dt>
    <dd>Date of birth</dd>
</dl>

Answer 2

使用表格，这是少数几个实际使用表格的实例之一那都错了。您不是将它用于布局而是用于文本标记。

然后将一个类应用于每个第一列，并在css中使该类具有适用于该列的text-align: right;。

Answer 3

这显然是何时使用表格的一个很好的例子。

这是表格数据。

使用th s为第一列单元格设置样式。

我甚至认为th默认为粗体。不确定所有的浏览器虽然如此，但不要伤害他们大胆的样式以确保：）。

Answer 4

我认为你说你想要使用一张桌子，但不想使用它是正确的。在这种情况下，我不认为表是正确的。如果我需要很好地组织数据，我个人只使用表格。因为你有这么多，所以到处都是一堆漂浮的div更麻烦，只需使用一张桌子。

因为这只是两列我会说使用两个div与浮点数或使用两个跨度，而不是强大的使用跨度，然后用css设置它。

Answer 5

表是一种按行和列排列数据的方法。

这就是你正在做的事情。

Answer 6

定义列表在语义上是正确的。

  <dl>
     <dt>Title:</dt>
     <dd>Some Title<dd>

     <dt>Author:</dt>
     <dd>Some Author</dd>

     <dt>Author Date of Birth:</dt>
     <dd>Date of birth</dd>
  </dl>

有关详细信息，请参阅W3C - http://www.w3schools.com/tags/tag_dl.asp

在CSS中处理这个简单示例的好方法是什么？

6 个答案: