我想按以下方式列出产品属性:
属性 1:项目
属性 2:项目
属性 3:项目
属性 4432:项目
请注意,“项目”开始有点缩进。
我知道这可以通过使用表格和 div 来完成。然而,它们对我来说似乎有点矫枉过正。有人能告诉我这通常是如何实现的吗?
提前致谢!
我想按以下方式列出产品属性:
属性 1:项目
属性 2:项目
属性 3:项目
属性 4432:项目
请注意,“项目”开始有点缩进。
我知道这可以通过使用表格和 div 来完成。然而,它们对我来说似乎有点矫枉过正。有人能告诉我这通常是如何实现的吗?
提前致谢!
定义列表在这里是合适的:
<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 标签。