居中导航栏 - CSS

Question

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

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

"帮我欧比旺克诺比你唯一的希望！"

Answer 1

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

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

你的导航栏神奇地居中。请参阅此jsFiddle以获取工作演示> http://jsfiddle.net/TLaN5/。显然，您需要修改父ul的宽度，以适应其中元素的正确宽度，但您应该了解这个想法。

Answer 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;规则。这应该可以解决您的问题。在此处查看实时示例。

Answer 3

您可以为 ul 指定一个定义大小并使其内容居中（确实删除内联显示）

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

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

ul li {
display: inline-block;
}

内联块属性在 ie7 中不起作用，因此请先检查您的浏览器目标...

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

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

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