1

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

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

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

这就是我得到的。

我还尝试float: left在 nav#header-navigation ul li 上放置一个，但这会导致列表项浮动到所有地方，例如屏幕顶部，在它们所属的包含 div 之外。

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

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

4

1 回答 1

2

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

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

于 2013-10-06T23:34:40.043 回答