html - 水平 float 列表项中的多行

Question

我正在尝试为我的网站创建一个导航菜单，其中的链接在页面顶部附近水平对齐，并且我希望每个链接下方都有一个简短的描述。当用户点击主链接文本或下面的描述时，应该将他们带到正确的页面。此外，每个菜单项都应该有一个三 Angular 形图标作为元素符号。 This is a picture我正在努力实现的目标。

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

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

在 CSS 中:

nav#header-navigation {
  margin-top: 160px;
  display: block;
}

nav#header-navigation ul li:before {
    content: url("../images/main-navigation-bullet.png");
    vertical-align: top;
}

nav#header-navigation ul li {
    display: inline;
    text-transform: uppercase;
    min-height: 22px;
}

nav#header-navigation ul li span.subnavigation {
  display: block;
  color: #999;
  font-size: 90%;
  margin-top: -10px;
  margin-left: 15px;
}

This is what I get.

我也试过在 nav#header-navigation ul li 上放置一个 float: left，但这会导致列表项到处 float ，比如屏幕顶部，在它们所属的包含 div 之外。

我发现的另一个问题是 Chrome 没有正确显示 vertical-align: top; 属性，因此子导航文本显示在该浏览器的错误位置。

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

Answer 1

看来您唯一需要的更改是:

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 中正确显示。