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

“帮助我Obi Wan Kenobi你唯一的希望！”

Answer 1

您的第一个CSS选择器正在寻找ul list-nav 类 list-nav，而不是ul#list-nav { padding: 0; margin: 0; list-style: none; width: 525px; margin: 0 auto; }的 id 。将您的第一个CSS规则更改为：

ul

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

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

Answer 3

您可以为ul指定一个定义大小并将其内容居中（实际上删除了display-inline）

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分配固定的）。

居中导航栏 - CSS

3 个答案: