0

嗨，我正在以下网站上上课，这应该很简单，没什么疯狂的。我试图让导航栏在中间，并在使用 CSS 之间有相等的间距。这是它的链接

http://bit.ly/16icBEi

4

6 回答 6

2

如评论中所述，您的 html 无效。把它改成这样可以解决这个问题：

<div class="menu">
    <ul id="navigation" class="menu-item">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="sitemap.html">Site Map</a></id="menu></li>
    </ul>
</div>

至于居中，您的菜单类是宽度 100%。出于某种原因，您的 ul 也被赋予了菜单类，但没有明显的原因。所以我建议给 ul 自己的类并为它定义一个宽度：

.menu-item{
    width:400px; /* or whatever your actual width is */
    margin:0 auto;
}

如果元素有宽度，margin: 0 auto 将起作用。如果不这样做，它将什么都不做。所以换句话说，给你的菜单一个宽度，然后给那个元素应用一个左右自动边距。0 auto是上下 0px，左右 auto 的简写。

于 2013-05-16T02:27:50.883 回答
1

您可以align设置分割的对齐方式<div></div>；

例子 ：-

<div align="ceneter">
       //Your Navigator here
</div>
于 2013-05-16T02:42:32.340 回答
1

您可以指定text-align:center,#navigation并display:inline用于列表样式

#navigation{
    list-style:none;
    text-align:center;
}
#navigation li{
    display:inline;
    background:#333;
    padding:5px 10px;
}

看看这里http://jsfiddle.net/qiqiabaziz/uJ5Tw

您可以删除任何未使用的 id 或类名<ul id="navigation" class="menu-item">，只是为了让您知道，类名是可重用的，但 id 不是。选择一个适合你的。

于 2013-05-16T03:11:55.543 回答
0

您的导航 HTML 标记无效。ul元素只能包含li元素。但是在你的标记里面没有li元素ul。您正在使用Id甚至不是有效标签的标签。所以改变你的标记是这样的

<ul id="navigation" class="menu item">
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About Us</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="sitemap.html">Site Map</a></li>
</ul>

menu并通过以下方式更改您的课程

.menu {
z-index: 9999;
/*width: 100%;*/ remove it
margin:0px auto;
}
于 2013-05-16T02:23:43.623 回答
0

对 css 进行一些更改：

.menu {
z-index: 9999;
width: 364px;
margin-left: auto;
margin-right: auto;
}
于 2013-05-16T02:27:36.843 回答
0

我知道它很脏，但它可以工作......在你<div class="menu">身上添加属性align ，它看起来像这样：

<div align="center" class="menu">


然后现在它将您的菜单居中..

于 2013-05-16T02:36:19.187 回答