居中导航栏 - CSS答案

【问题标题】：Centering Navigation Bar - CSS居中导航栏 - CSS
【发布时间】：2012-11-14 11:57:10
【问题描述】：

我正在制作自己的博客，我还没有域名，所以它还没有上线（我一直在从一个文件夹构建网站，其中包含不同的目录作为页面）。我一直在写博客，我正在寻找一个简单的导航菜单。我在网上找到了一个。我正在尝试将导航栏居中，并且我尝试了许多适用于其他人网站的解决方案，但它不适用于我的网站。这是代码（我已将其调整为我自己的颜色和导航标题）

<ul id="list-nav">
 <li><a href="../index.html">Home</a></li>
 <li><a href="../books/books.html">Books</a></li>
 <li><a href="about.html">About</a></li>
 <li><a href="../contact/contact.html">Contact</a></li>
</ul>

这是 CSS：

ul.list-nav {
 list-style:none;
 width:525px;
 margin-right: auto;
 margin-left: auto;
}

ul#list-nav li {
 display:inline;
}

ul#list-nav li a {
 text-decoration:none;
 padding:5px 0;
 width:150px;
 background:#383838;
 color:#eee;
 float:left;
 border-left:1px solid #fff;
 }

ul#list-nav li a:hover {
 margin-right: auto;
 margin-left: auto;
 background:#cccccc;
 color:#000;
 }

“帮助我欧比旺克诺比你我唯一的希望！”

【问题讨论】：

您能否澄清一下这段代码有什么问题，以及您正在寻找什么结果？
我编辑了它，我试图将我的导航菜单居中，我认为我拥有的一些代码正在取消我试图修复它的任何事情。感谢您的通知。我没有意识到我忘了陈述我的问题。此链接指向我的整个代码 html 和 css：jsfiddle.net/Sederu/ZLYXr

标签： css list navigation centering

【解决方案1】：

您的第一个 CSS 选择器正在寻找一个 class 为 list-nav，而不是 id 为 list-nav 的 ul。将您的第一个 CSS 规则更改为：

ul#list-nav {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 525px;
    margin: 0 auto;
}

您的导航栏神奇地居中。请参阅此 jsFiddle 进行工作演示 > http://jsfiddle.net/TLaN5/。显然，您需要修改父 ul 的宽度以适应其中元素的正确宽度，但您应该明白这一点。

【讨论】：

我更改了该规则，但并没有改变任何内容。它仍然一直卡在左边。你认为我的其他一些代码可能会取消某些东西吗？
几乎可以肯定。你检查过我发布的 jsFiddle 吗？这是一个工作示例。
是的，我看到了。我意识到如果它只是那个代码它就可以工作。如果我给你我所有的 html 和 css，你认为你能找到取消它的原因吗？
是的，我是这么认为的。我想要吗？不是真的 ;) 把它放在一个 jsFiddle 中，然后通过链接发送给我。我去找你。

【解决方案2】：

我会wrap<div class="wrap"> 内的整个页面。您已经在代码中声明了两次 margin，所以我将删除第一次出现并保留如下：

ul#list-nav {
  padding: 0;
  list-style: none;
  width: 725px; //NOTE I have increased the width value.
  margin: 0 auto;
}

另外，找到

ul { 
     display: inline;
     text-decoration: none;
     color: black;}

[第 20 行附近] 并删除 display: inline; 规则。这应该可以解决您的问题。查看实时示例here。

【讨论】：

有必要把整个页面都包起来吗？还有必要把ul#list-nav的宽度改成725px吗？
没有必要wrap 一切，我使用这种方法，因为它可以更好地控制页面元素。我已经将width 设置为725px，仅作为示例，因为之前的width 不够用。很高兴听到它奏效了。
那么包装整个页面是否会更容易为我的页面设置背景图像？我也遇到了一些麻烦。
你有什么样的背景问题？

【解决方案3】：

您可以为 ul 定义大小并将其内容居中（确实删除 display-inline）

ul {
width: 960px;
margin: 0 auto;
text-align: center;
}

然后将子 li 元素显示为内联块：

ul li {
display: inline-block;
}

inline-block 属性在 ie7 中不起作用，所以请先检查您的浏览器目标...

另一种方法是只使用好的ol'

ul li {
float: left;
}

ul:after {
display: block;
content: "";
clear: both;
}

但 li 不会在 ul 中居中，如果您绝对想动态执行此操作（无需为每个 li 分配固定的 with），则必须使用 javascript。

【讨论】：