Question

我正在构建的网站中有一些部分，其中有一些信息分为两列。左栏有“键”（不知道怎么称呼它，对不起），右栏有值，如下所示：
image taken from site's psd

浮动内部div并使用其他一些样式，我可以使用以下内容实现完全结果：

<div id="container">
  <div>
    <ul>
      <li>Size</li>
      <li>etc...</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>10MB</li>
      <li>etc...</li>
    </ul>
  </div>
</div>

但由于每个键都与其值完全分开，因此标记似乎根本不是搜索引擎友好的。还有其他方法可以做到这一点，保持居中的风格并使标记更具语义性吗？

感谢您的帮助，
丹尼尔。

Answer 1

您当然可以使用表格来获取此数据，这可能是合适的。您可能使用的另一个选项是描述列表：

<dl>
    <dt>Size</dt>
    <dd>2.63 MB</dd>
    <dt>Views</dt>
    <dd>34,412</dd>
    <dt>Downloads</dt>
    <dd>2,125</dd>
    <dt>Likes</dt>
    <dd>1.368</dd>
    <dt>Category</dt>
    <dd>Test</dd>
</dl>

添加一些CSS ...

dt, dd {
    font-family:sans-serif;
}
dt {
   float:left;
   clear:left;  
   text-align:right;
   width:50%;
   color:#bbb;
}
dd {
   float:left;
   margin-left:3em;
   color:#999
}

你有它。 http://jsfiddle.net/FuaNk/

我无法评论这是否有助于搜索引擎优化，但价值与键相邻，这似乎符合您的要求。

有关<dl>的更多信息，以前称为“定义列表”：

标记中分隔的键/值对。有更好的SEO的其他方式吗？

1 个答案: