html - 如何在不手动设置宽度的情况下水平居中导航栏？

Question

我有以下导航栏：

<header>
  <h1>Blah blah</h1>
  <nav>
    <ul>
      <li><a href="#">foo</a>
      <li><a href="#">bar</a>
      <li><a href="#">baz</a>
      <li><a href="#">zop</a>
    </ul>
  </nav>
</header>

如何完美居中？我也有以下CSS：

header {
    background-color: #a4c9f3;
    text-align: center;
}
header nav {
    /* guessing this width works, but I don't want to do it manually */
    /* width: 24em; */
    display: inline-block;
}
header nav ul li {
    float: left;
    padding: 0 0 0 6px;
    list-style: none;
}
header nav ul li a {
    padding: 9px 22px 4px 16px;
    background-color: #83b2e6;
}

正如您在这个jsfiddle中看到的，它几乎居中。

Answer 1

将您的文本更改ul为 width: 100%并将文本居中，将您的设置li为display: inline. 并将您的锚点显示为内联块：

CSS：

header {
    background-color: #a4c9f3;
    text-align: center;
}
header nav ul {
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
header nav ul li {
    display: inline;
}
header nav ul li a {
    padding: 9px 22px 4px 16px;
    display: inline-block;
    background-color: #83b2e6;
}

更新的小提琴

Answer 2

您只需要从 ul 和 li 元素中删除默认填充/边距，您可以使用重置 css 样式表，例如 Eric Meyer 的 reset 或类似的东西：

header nav ul, header nav ul li{
    margin: 0;
    padding: 0;
}

演示工作： http: //jsfiddle.net/YkZqj/13/ CSS 重置： http: //meyerweb.com/eric/tools/css/reset/