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

updated Fiddle

Answer 2

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

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

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

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

2 个答案: