Question

我有一些定义列表，它们将图片与这些图片的定义分组。我可以在dl内使用哪个元素来显示列表的标题？例如，使用以下列表显示“Calicos”或“Tabbys”：

<dl id="calicos">
  <dt>Abby</dt>
  <dd><img src="http://placekitten.com/200/200?image=8" /></dd>
  <dt>Beverly</dt>
  <dd><img src="http://placekitten.com/200/200?image=7" /></dd>
</dl>

<dl id="tabbys">
  <dt>Carlos</dt>
  <dd><img src="http://placekitten.com/200/200?image=16" /></dd>
  <dt>Davy</dt>
  <dd><img src="http://placekitten.com/200/200?image=13" /></dd>
</dl>

理想情况下，我想在没有JavaScript的情况下这样做。

Answer 1

无。您不能将<dt>或<dd>以外的任何内容放在<dl>下。

请考虑这样的事情：

<section id="calicos">
  <h2>Calicos</h2>

  <dl>
    <dt>Abby</dt>
    <dd><img src="http://placekitten.com/200/200?image=8" /></dd>
    <dt>Beverly</dt>
    <dd><img src="http://placekitten.com/200/200?image=7" /></dd>
  </dl>
</section>

<section id="tabbys">
  <h2>Tabbys</h2>

  <dl>
    <dt>Carlos</dt>
    <dd><img src="http://placekitten.com/200/200?image=16" /></dd>
    <dt>Davy</dt>
    <dd><img src="http://placekitten.com/200/200?image=13" /></dd>
  </dl>
</section>

Answer 2

相应的标记是h2元素之前的dl或其他标题元素。

Answer 3

这样的事情怎么样？

<details>
  <summary>Calicos</summary>
  <dl id="calicos">
      <dt>Abby</dt>
      <dd><img src="http://placekitten.com/200/200?image=8" /></dd>
      <dt>Beverly</dt>
      <dd><img src="http://placekitten.com/200/200?image=7" /></dd>
  </dl>
</details>
<details>
  <summary>Tabbys</summary>
  <dl id="tabbys">
    <dt>Carlos</dt>
    <dd><img src="http://placekitten.com/200/200?image=16" /></dd>
    <dt>Davy</dt>
    <dd><img src="http://placekitten.com/200/200?image=13" /></dd>
  </dl>
</details>

http://jsfiddle.net/DCnYC/1/

显示定义列表的标题？

3 个答案: