html - HTML 列出产品属性

Question

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

属性 1：项目

属性 2：项目

属性 3：项目

属性 4432：项目

请注意，“项目”开始有点缩进。

我知道这可以通过使用表格和 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 标签。