HTML列出产品属性

Question

我想按以下方式列出产品属性：

属性1：项目

属性2：项目

属性3：项目

财产443​​2：项目

请注意，“Item”开始缩进。

我知道这可以通过使用表格和div来完成。然而，他们似乎对我来说有点过分。有人能告诉我这是如何实现的吗？

提前致谢！

Answer 1

这里的定义列表是合适的：

<dl>
    <dt>Property</dt>
    <dd>The related item</dd>
    <dt>Property2 </dt>
    <dd>The second related item</dd>
</dl>

要使该列表与您在问题中显示的完全一致，请使用以下CSS：

dl dt {
    float: left;
    margin: 0 10px 0 0;
}

dl dd + dt, dl dd + dd {
    clear: left
}

dl dd + dd {
    float: none
}

请在此处查看jsfiddle：http://jsfiddle.net/Jolora/N5Zkd/

或者，简单的无序列表会产生更清晰的代码，尽管语义更少：

<ul>
    <li>Property <span>The related item</span></li>
    <li>Property 2 <span>The related item</span></li>
</ul>

span标记允许您添加CSS以应用缩进。如果不需要超过一个空格缩进，则删除span标记。