1

ulベースの水平ナビゲーションバーを作成していますが、各アイテムに2つのレベルの見出しを付けたいと思います。これは、次のようになります。

     Nav item1            Nav item2             Nav item3
Nav item1 subtitle    Nav item2 subtitle    Nav item3 subtitle

字幕はメインのナビゲーションアイテムとは異なるスタイルにする必要があります。私はこれを最初に(素朴に?)li内にネストされたapを使用して行いましたが、W3Cはapをli内にネストできないと言いました。

基本的に、私はbrを避けようとしています。これは主に、それが適切なセマンティクスではないためです。私はこれを間違った方法で行っていますか?

編集:追加する必要があります。ナビゲーションアイテムとそのサブタイトルを同じアンカータグに含める必要があります。これらは1つのリンクであるためです(そして、a:hoverを機能させたい)。これは、私が思うに、li内で複数の見出しタグを使用することを排除します。

編集2:答えは役に立ちました、ありがとう。注意すべき興味深い点-ブロックスパン==divと言われていましたが、それはW3Cバリデーターがそれを見る方法ではありません。スパンのdisplay:blockであっても、アンカー内にスパンをネストすることは常に可能ですが、バリデーターはCSSファイルとHTMLファイルを一緒にチェックしないため、アンカー内にdisplay:inlineh1を含めることはできません。

4

4 に答える 4

4

span意味的に不活性であるため、を使用してから、でスタイルを設定できますdisplay: block

于 2009-04-09T17:48:53.550 に答える
1

私の意見では<br />、タイトルとサブタイトルを区切る改行には意味的に適切です。を使用して、別のスタイルを設定できます<span>

于 2009-04-09T18:22:37.493 に答える
0

通常の順序付けされていないリストの代わりに、辞書リストを使用する必要があります。あなたの例はそうあるべきです。

<dl>
  <dt>
    Nav Item 1
  </dt>
  <dd>
    Nav Item 1 Subtitle
  </dd>
  <dt>
    Nav Item 2
  </dt>
  <dd>
    Nav Item 2 Subtitle
  </dd>
  <dt>
    Nav Item 2
  </dt>
  <dd>
    Nav Item 2 Subtitle
  </dd>
</dl>

または、HTML5またはXHTML2.0で実行できます

<dl>
  <di>
    <dt>
      Nav Item 1
    </dt>
    <dd>
      Nav Item 1 Subtitle
    </dd>
  </di>
  <di>
    <dt>
      Nav Item 2
    </dt>
    <dd>
      Nav Item 2 Subtitle
    </dd>
  </di>
  <di>
    <dt>
      Nav Item 2
    </dt>
    <dd>
      Nav Item 2 Subtitle
    </dd>
  </di>
</dl>
于 2009-06-24T18:47:55.607 に答える
-1
  1. ディスプレイ付きスパン:block == div
  2. <li><h3>タイトル</h3><h4>サブタイトル</h4></ li>

(または他の可能なHタグのいずれか。

于 2009-04-09T17:53:18.033 に答える