1

我正在制作一个基于 ul 的水平导航栏,但我想在每个项目中有两个级别的标题,有点像这样:

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

副标题的风格必须与主导航项目不同。我首先(天真地?)通过使用嵌套在 li 中的 ap 来做到这一点,但W3C说我不能将 ap 嵌套在 li 中。

基本上,我试图避免使用 br,主要是因为这不是正确的语义,是吗?我会以错误的方式解决这个问题吗?

编辑:我应该添加,我想要导航项目和它的副标题在同一个锚标签中,因为它们是一个链接(我想要 a:hover 工作)。我认为这排除了在 li 中使用多个标题标签。

编辑2:答案很有用,谢谢。需要注意的一件有趣的事情 - 虽然有人说块跨度 == div,但这不是 W3C 验证器看到它的方式。即使跨度的显示:块,您始终可以将跨度嵌套在锚点内,但您不能例如在锚点内有显示:内联 h1,因为验证器不会同时检查 CSS 和 HTML 文件。

4

4 回答 4

4

您可以使用 aspan因为它在语义上是惰性的,然后使用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 或 XHTML 2.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 回答