2

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

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

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

4

3 回答 3

2

您的第一个 CSS 选择器正在寻找ul具有 的类而list-nav不是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以适应其中元素的正确宽度，但您应该明白这一点。

于 2012-11-26T22:51:30.010 回答
0

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

于 2012-11-26T23:52:11.723 回答
0

您可以为 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。

于 2012-11-27T00:18:49.003 回答