5

所以我正在标记客户的网页设计。该页面是一个常见问题解答页面，其中每个常见问题解答部分都有一个问题和答案列表。对于这种情况，最合适的语义标记是 html 定义列表。

客户的模型还在每个问题/答案对旁边显示数字，例如有序列表。

所以很自然地我想我会用<dl>元素标记内容，并使用 CSS 来添加list-style-type: decimal. 然而，这完全被忽略了。

是因为<dl>元素不能接受列表样式吗？这似乎非常倒退，因为它毕竟是一个列表元素！

还是我的标记做错了什么？

这是我的代码 CSS 和 HTML 的示例：

dl { list-style: decimal; }
<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>

4

3 回答 3

8

来自Mozilla 文档：

list-style-type CSS 属性指定列表项元素的外观。由于它是唯一默认显示：列表项，这通常是一个 <li> 元素，但可以是任何具有此显示值的元素。

您可以在 CSS 中应用display:list-item到您的dt元素，然后也可以list-style-type对其应用选项。

dt.wanna-be-list {
  display:list-item;
  list-style-type: square;
}
于 2013-02-25T19:24:33.063 回答
1

试试这个jsFiddle 示例：

<html>

<dl class="faq">
    <dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
    <dd>1,000,000</dd>
    <dt>What is the air-speed velocity of an unladen swallow?</dt>
    <dd>What do you mean? An African or European swallow?</dd>
    <dt>Why did the chicken cross the road?</dt>
    <dd>To get to the other side</dd>
</dl>

<css>

.faq {
    counter-reset: my-badass-counter;
}
.faq dd {
    margin: 0 0 50px;
}
.faq dt:before {
    content: counter(my-badass-counter, decimal);
    counter-increment: my-badass-counter;
    font: bold 50px/1 Sans-Serif;
    left: 0;
    position: absolute;
    top: 0;
}
.faq dt, .faq dd {
    padding-left: 50px;
}
.faq dt {
    font: bold 16px Georgia;
    padding: 4px 0 10px;
    position: relative;
}

从这个解释你可以看到它在这个例子中工作

于 2013-02-25T19:35:44.353 回答
0

改用 Ol(ordered list)，样式应该可以工作（ul 表示无序）。

于 2013-02-25T19:24:54.740 回答