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 回答