保证金汽车噩梦

Question

我尝试了所有我能想到的方法，但我一生都无法弄清楚为什么导航菜单不会居中。我已经尝试过文本对齐、自动边距、块显示...在父级和子级上。我确信这是非常简单的事情，但这开始导致脱发。

该演示可在此处获取：

如果您想查看一些代码，这里是 HTML ：

<div id="navigation" class="col-full">

<ul id="main-nav" class="nav fl">

  <li id="menu-item-266" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-266"><a href="http://previews.tinygiantstudios.co.uk/">Home</a></li>
  <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://previews.tinygiantstudios.co.uk/about-us/">About Us</a></li>
  <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://previews.tinygiantstudios.co.uk/news/">News</a></li>
  <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://previews.tinygiantstudios.co.uk/contact/">Contact</a></li>

</ul>   
</div><!-- /#navigation -->

还有 CSS

#navigation {
  margin-bottom: 0px;
  background-color: #131313;
  border-top: 0px solid #DBDBDB;
  border-bottom: 0px solid #DBDBDB;
  border-left: 0px solid #DBDBDB;
  border-right: 0px solid #DBDBDB;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  font: 14px/14px sans-serif;
  padding: 10px 0;
}

.nav {
  z-index: 99;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
  margin-left: 10px;
}

.fl {
  float: left;
}

.nav li {
  float: left;
  width: auto;
}

谁能告诉我我缺少什么？

谢谢，

Answer 1

要将边距设置为自动，您需要指定宽度，并将元素显示为块。

Answer 2

将边距设置为零/自动仅适用于固定宽度的块元素。删除内联浮动使其生效。

Answer 3

要使用 margin: 0 auto; 居中，您的元素必须是 display: block;，具有固定宽度，并且不能使用 浮动浮动。

因此，您需要从

中删除 fl 类，并为其指定固定宽度。

Answer 4

您应该为 #navigation 或 #main-nav 指定宽度

，现在 #navigation 跨越了 #wrapper 的整个宽度，因此永远无法中心。将其宽度设置为 500 像素左右即可解决问题。

如果您想将 main-nav 居中而不是导航，则应删除其中的 float:left; 并为其指定固定宽度和 margin: auto;

Answer 5

将此代码添加到您的 CSS 中：

.nav {
  text-align: center;
  width: 100%;
}

.nav li {
  float: none;
  display: inline-block;

  /* IE7 should be pleased */
  zoom: 1;
  *display: inline;
}

它不适用于旧版本的 IE (inline-block)，但是什么可以呢？