html - 导航栏与 HTML 和 CSS 对齐

Question

我正在尝试构建标题导航栏。这是我在 HTML 中的内容:

  <header>
       <nav>
           <ul>
               <li>Home</li>
               <li>About</li>
               <li>Contact</li>
               <li>Sign In</li>
          </ul>
      </nav>
  </header>

这是 CSS:

header nav {
   text-align: right;
}

header nav ul li { 
   display: inline;
   font-family: Arial;
   vertical-align: middle;
}

虽然 li 文本向右对齐，但它位于 nav 栏的基线上。代码有什么问题？我怎样才能改进代码？谢谢!

Answer 1

vertical-align 仅适用于显示为 table-cell 的内容，尚未得到广泛支持(也许我在这里错了，因为我已经有一段时间了检查过)。此外，我通常会看到 li 的导航向左浮动，而不是内联显示。我不确定哪个更好，但我习惯了 float ，所以我会在这里使用它。

我通常对导航中的“垂直居中文本”所做的是向 anchor 元素添加填充。这为您提供了更大的可点击区域的额外好处，而不仅仅是文本本身。 这仅在您的导航项位于一行时才有效。如果您需要多行，那么它会变得更加复杂。

这是一些更新的 html，我添加了强制性 anchor :

<header>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="sign-in.html">Sign In</a></li>
        </ul>
    </nav>
</header>

而且 CSS 可以改变很多。这是实现我认为您期望的布局的最低要求。

header nav ul li { 
    float: left;
}

header nav ul li a {
    display: block;
    padding: 8px;
    text-align: center;
}

在这个例子中，我将导航文本居中，因为这就是我认为你想要的，但如果不是这样，它可以很容易地改回 text-align: right;.

JSFiddle example

JSFiddle with the navigation floated right感谢blurfus