Question

我尝试了各种各样的方式，但对于我的生活，我无法理解为什么导航菜单不会居中。我尝试过text-align，margin-auto，block display ......在父母和孩子身上。我确信这是一种简单的事情，但这开始导致脱发。

如果您想查看一些代码，请点击 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

将此代码添加到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），但会是什么？

Answer 2

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

Answer 3

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

Answer 4

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

因此，您需要从fl中移除<ul>类，并为其指定固定宽度。

Answer 5

您应指定#navigation或#main-nav

的宽度

现在#navigation跨越#wrapper的整个宽度，因此无法居中。使其宽度约为500px将解决问题。

如果您想要使用主导航而不是导航，则应移除float:left;，并为其指定固定宽度margin: auto;

保证金汽车噩梦

5 个答案: