Question

我正在制作一个基于ul的水平导航栏，但我希望每个项目都有两个级别，有点像这样：

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

字幕必须与主要导航项的风格不同。我首先（天真地？）通过使用嵌套在li中的p来做到这一点，但是W3C说我无法在li中嵌入p。

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

编辑：我应该补充一下，我希望导航项和它的副标题在同一个锚标签中，因为它们是一个链接（我想要一个：悬停工作）。这就排除了在我认为的多个标题标签的使用。

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

Answer 1

您可以使用span，因为它在语义上是惰性的，然后使用display: block设置样式。

Answer 2

我的观点是<br />在语义上适用于分隔标题和副标题的换行符。您可以使用<span>以不同方式设置样式。

Answer 3

您应该使用字典列表而不是常规的无序列表。你的榜样应该是。

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

Answer 4

跨度显示：block == div
＆LT;李＆GT; ＆lt; h3＆gt;标题＆lt; / h3＆gt; ＆lt; h4＆gt;子标题＆lt; / h4＆gt; ＆LT; /锂＆GT;

（或任何其他可能的H标签。

什么是在基于ul的导航栏中休息的最佳语义方式？

4 个答案: