1

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

属性 1:项目

属性 2:项目

属性 3:项目

属性 4432:项目

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

我知道这可以通过使用表格和 div 来完成。然而,它们对我来说似乎有点矫枉过正。有人能告诉我这通常是如何实现的吗?

提前致谢!

4

1 回答 1

2

定义列表在这里是合适的:

<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 标签。

于 2013-03-21T06:53:15.813 回答