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 に答える