0

我有一些定义列表，哪些图片具有这些图片的定义。我可以在 中使用什么元素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 的情况下做到这一点。

4

3 回答 3

5

没有任何。<dt>除了 a或<dd>a之外，你不能放任何东西<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>
于 2012-04-18T19:29:10.143 回答
1

适当的标记是h2元素之前的一个或其他标题dl元素。

于 2012-04-18T19:32:44.370 回答
0

这样的事情怎么样？

<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/ ​</p>

于 2012-04-18T19:25:23.977 回答