保证金自动噩梦

Posted 2023-03-06

技术标签:

【中文标题】保证金自动噩梦【英文标题】：Margin auto nightmare 【发布时间】：2012-01-12 22:52:42 【问题描述】：

我已经尝试了所有我能想到的方法，但对于我的一生，我无法弄清楚为什么导航菜单不会居中。我已经尝试过 text-align、margin-auto、block display... 在父子节点上。我敢肯定这是非常简单的事情，但这开始导致脱发。

演示是available here：

如果您想查看一些代码，这里是 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;

谁能告诉我我错过了什么？

谢谢，

【问题讨论】：

这是一个甜蜜的设计。只是想你想知道。 【参考方案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)，但是什么可以呢？

【讨论】：

这似乎不适用于提供的测试页面，我也不明白为什么会这样。真的吗？我用 Chrome 的 Inspector 做了这个，效果很好。 @Blender Weird，我也在 Chrome 中尝试过，但无法正常工作。哦，好吧，可能意味着该睡觉了。 @TinyGiantStudios：我在一秒钟前交换了我的代码。尝试将该代码粘贴到 CSS 文件的末尾。（我否定了你的float）。酷 - 谢谢。刚刚进行了更改，它似乎有效。知道可以为 IE7 做什么吗？【参考方案2】：

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

【讨论】：

我最初也是这么认为的，但在提供的测试页面上似乎不起作用。 @AndrewMarshall，我刚刚在 Chrome 中自己测试过，效果很好。嗯，我试过了，但无法正常工作。哦，好吧，可能意味着是时候让我的大脑休息和睡觉了。【参考方案3】：

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

【讨论】：

不确定我是否遵循 - 我尝试了您的建议（至少我认为我做到了），但它不起作用...您有任何我应该尝试的代码吗？同上布拉德上面所说的。除非您在其他地方完成该块，否则不要使用内联浮点数。设置列表，使ul 以左/右边距设置为auto 结束，并将其强制为固定宽度。【参考方案4】：

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

所以你需要从你的<ul> 中删除fl 类并给它一个固定的宽度。

【讨论】：

【参考方案5】：

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

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