45

我想呈现一个包含标签列表及其关联值的配置文件用户容器。

这是我想显示的信息和布局的摘录：

名字.......我的名字

年龄....................MyAge

电子邮件........我的电子邮件

我知道有大量可用的示例，但问题是似乎没有普遍接受的解决方案。

到目前为止，我已经看到了以下用法：

  1. 带有标记的表（和 <tr>、<td>...）
  2. 带有 <ul> 标记的无序列表（以及 <li>、<div>...）
  3. 带有 < h1 >、< h2 >...< p > 的常规标记
  4. 带有<DL>、<DT>和<DD>的定义列表
  5. <标签>...？

什么是语义上最正确的？什么是最容易显示的（在 2 列布局中）？您建议我使用什么以及出于什么原因？

（非常欢迎使用 html/css 代码片段）

4

4 回答 4

37

我认为在语义上最正确的是<dl>,<dt>和<dd>，因为您所显示的是名字、年龄和电子邮件的有效定义。

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>foo@bar.com</dd>
</dl>

但是，显然，在表格中显示它的最简单方法是使用<table>,<th>和<td>。您可以使用类似这样的定义列表来组合表格布局：

dt { float: left; clear: left; width: 6em; font-weight: bold; }
dd { float: left; }
<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>foo@bar.com</dd>
</dl>

有关<dl>标签的更多信息，请点击此处。

于 2009-11-06T13:58:15.093 回答
22

哇。我们真的用“表格布局是邪恶的！使用 CSS！” 东西，不是吗？

带有<th>标签和<td>值的表格完全适用于此类内容，为您提供所需的渲染，并且至少在语义上与定义列表一样正确，可以说更正确。两者都比无语义的 div 更可取。

于 2009-11-06T15:04:38.973 回答
4

我知道这已经得到解答，但我认为定义列表可能非常合适。
我确实同意表格总是适用于表格数据的说法......但是
我已经在许多我喜欢避免表格的地方使用了这个 - 我不认为这是一个不正确的方法。

定义列表：

<dl>
  <dt>Label</dt>
  <dd>Value</dd>

  <dt>Label 2</dt>
  <dd>Value 2</dd>
</dl>

使用 CSS：

dl dt {
  float: left;
  width: 200px;
  text-align: right;
}

dt dd {
  margin-left: 215px;
}
于 2012-07-29T07:31:02.090 回答
-1

这是一个很好的问题，也是一个可以引起很多争论的问题，因为没有固定的方法来做到这一点。

他们中的许多人都有论据，但就我个人而言，我会保持简单。

<div class="profile">
    <p>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </p>
    <p>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </p>
    <p>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </p>
</div>

或者

<ul class="profile">
    <li>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </li>
    <li>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </li>
    <li>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </li>
</ul>

CSS 看起来像这样；

.profile p {
    overflow: hidden;
}

.profile .label {
    vertical-align: top;
    float: left;
    width: 40%;
}

.profile .value{
    vertical-align: top;
    float: left;
    width: 60%;
}

没有在 CSS 中引用任何特定 html 节点名称的原因是，如果将来有一种公认的方法可以做到这一点，您只需更改 HTML 中的节点名称。

于 2009-11-06T14:08:56.103 回答