我应该如何创建带有项目符号的描述列表？答案

【问题标题】：How should I create a description list with bullets?我应该如何创建带有项目符号的描述列表？
【发布时间】：2012-07-17 01:49:21
【问题描述】：

我有一个无序的<dl> 描述列表，因此应该在每个<dt> 之前显示项目符号。

编辑：为了澄清，我有一个<dt>-<dd> 对的无序列表。它们应该看起来像一个列表项，<dt> 前面有一个项目符号。

我可以想到两种方法来将项目符号应用于此列表：

在<dt> 周围加上<ul>，然后在项目周围加上<li>s
使用<dt>'s CSS :before 伪选择器并为其赋予项目符号的内容

用项目符号创建描述列表的更好方法是什么？

感谢您的回复。

【问题讨论】：

我会使用 :before。添加
- 标签会给你的 html 添加不必要的标记。
仅供参考，dt（描述标题，不是列表）和dd 应该是兄弟姐妹，而不是父/子——两者都是dl（描述列表）的子。跨度>
我相信最初
被认为等同于子弹，这就是为什么如果这是您的样式偏好，您需要使用 CSS 来强制使用它。考虑一个字典，它不会在每个术语之前加上一个项目符号，这是

试图模仿的范例。

标签： css html html-lists

【解决方案1】：

您为什么不简单地使用无序列表？你不是有什么特别的原因吗？

但要回答您的问题，您可以使用：

<dt>
   <dd style='display:list-item;'> Content </dd>
   <dd style='display:list-item;'> Content </dd>
</dt>

我不确定跨浏览器的兼容性。

【讨论】：

对display: list-item的支持还不错——IE8+和其他所有现代浏览器，和:before伪元素一样。
就个人而言，这似乎比:before 更容易，如果两者都提供相同的支持，我想它更多的是个人选择。
将<dd> 放在<dt> 中是否“合适”？验证器为 <dt> 结束标记引发错误。如果我没有足够清楚地表达我的问题，我很抱歉：我需要一个 <dt>-<dd> 对的列表。
和

都是
的后代，你不应该在

中有一个

【解决方案2】：

根据我对类似问题的处理，<dl> 标签似乎不支持列表项目符号。这是一个耻辱，因为它是一个 html 列表。（而且，似乎没有人记录这一点。）

幸运的是，您可以毫不费力地用其他代码块打断列表。而且，还有<br /> 标签。所以....

CSS：

ul.listPlayed {
     list-style-type: square;
}

HTML：

<ul class="listPlayed">
    <li>1st Game<br />
    Description of first game.<br />
    <a href="#">Wikipedia</a><br />
    <a href="#">Official page</a></li>
</ul>

因此，将所有文本放在 <li> 标记中，并在该集合中设置格式。

【讨论】：