所以我正在标记客户的网页设计.该页面是常见问题解答页面,其中每个常见问题解答部分都有一个问题和答案列表.此方案的最合适的语义标记是html定义列表.
客户端的模型还会在每个问题/答案对旁边显示数字,例如有序列表.
所以我自然认为我只是用<dl>元素标记内容,并使用CSS添加list-style-type: decimal.但是,这完全被忽略了.
是因为<dl>元素不能接受列表样式吗?这看起来非常倒退,因为它毕竟是一个列表元素!
或者我的标记做错了什么?
这是我的代码CSS和HTML的一个例子:
dl { list-style: decimal; }Run Code Online (Sandbox Code Playgroud)
<dl class="some-list">
<dt><strong>Q</strong>: How Do I Do Some Thing?</dt>
<dd><p><strong>A:</strong> You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this:</p>
</dd>
<dt><strong>Q</strong>: How Do I Do Some Other Thing?</dt>
<dd><p><strong>A:</strong> You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this:</p>
</dd>
</dl>Run Code Online (Sandbox Code Playgroud)
来自Mozilla文档:
list-style-type CSS属性指定列表项元素的外观.由于它是唯一默认显示:list-item的人,这通常是<li>元素,但可以是具有此显示值的任何元素.
您可以将display:list-item您的dt元素在CSS,然后也适用一个list-style-type选项,以它为好.
dt.wanna-be-list {
display:list-item;
list-style-type: square;
}
Run Code Online (Sandbox Code Playgroud)