Html 水平浮动列表项中的多行

我正在尝试为我的网站创建一个导航菜单，链接水平排列在页面顶部附近，我希望每个链接下面都有一个简短的描述。当用户单击主链接文本或下面的描述时，应该会将他们带到正确的页面。此外，每个菜单项都应该有一个三角形图标作为项目符号。我正在努力实现的目标

当列表只有一行时，我可以使它水平对齐。但当我尝试添加更多时，它就崩溃了

<nav id = "header-navigation">
  <ul>
    <li>
      <a href="/">
        Home
        <span class = "subnavigation">Foo!</span>
      </a>
    </li>
    <li>
      <a href="/contact">
        Contact
         <span class = "subnavigation">Bar</span>
    </li>
  </ul>
</nav><!-- header-navigation -->

我还尝试在导航标题导航ulli上放置一个

float:left

，但这会导致列表项在其所属的包含div之外到处浮动，比如在屏幕顶部

我发现的另一个问题是Chrome没有显示垂直对齐：top属性正确，因此子导航文本显示在浏览器上的错误位置

---

有没有一种方法可以让它跨浏览器工作，或者这仍然是最好使用图像来完成的事情？

看起来您需要的唯一更改是：

nav#header-navigation ul li{
    display: inline-block;
}

nav#header-navigation ul li a{
    display: inline-block;
    vertical-align: top;
}

摆脱

nav#header-navigation ul li span.subnavigation {
    margin-top: -10px;
    margin-left: 15px;
}

---

在进行这些更改后，它在Linux Mint 15上的Firefox和Chromium中正确显示。

您可以在上面设置一个示例吗？这是一个新的提琴：它的工作原理与我刚才描述的一样。如果删除具有“类子导航”的跨距，菜单项将显示在一行上，就像它们应该显示的那样。正如我所说，它在Chrome（至少是Ubuntu Chrome）中也不能正确显示。谢谢，这就成功了。我曾经玩过很多内联块，但我的代码中肯定有其他东西把它扔掉了。当我删除它，然后复制和粘贴，就像你有它一样，它开始工作。但仍然无法在Chrome中正确显示。安装了Chrome（与Chrome相同的渲染引擎）并更新了我的答案@USER2242700这对我不起作用，它将子导航菜单覆盖到主菜单文本上。这不是你所看到的吗？你是否去掉了

span.次导航
上的空白@user2242700Oh是的，在Chrome上是这样，但是在Firefox上，子导航文本在三角形项目符号下面，而不是像上面的文本那样在它旁边。
nav#header-navigation ul li span.subnavigation {
    margin-top: -10px;
    margin-left: 15px;
}