Question

我正在尝试为我的网站创建一个导航菜单，其中链接水平对齐在页面顶部附近，我希望每个链接都有一个简短的描述。当用户点击主链接文本或下面的描述时，它应该将它们带到正确的页面。此外，每个菜单项都应该有一个三角形图标作为子弹。 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.

我还尝试在导航＃header-navigation ul li上放置一个float: left，但这导致列表项遍布整个地方，比如屏幕顶部，包含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中正确显示。

水平浮动列表项中的多行

1 个答案: