Question

您好我正在以下网站上课，它假设非常简单，没什么好疯狂的。我试图让导航栏在中间，并使用CSS之间的间距相等。这是它的链接

Answer 1

如评论中所述，您的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将自动运行。如果没有，它将无能为力。换句话说，给你的菜单一个宽度，然后对该元素应用左右自动边距。 0 auto是上下0px，左右自动的简写。

Answer 2

您可以align设置分部<div></div>;

的对齐方式

示例： -

<div align="ceneter">
       //Your Navigator here
</div>

Answer 3

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

您可以删除<ul id="navigation" class="menu-item">的所有未使用的ID或类名，只要您知道，类名是可重用的，但ID不是。选择一个适合你的那个。

Answer 4

您的导航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;
}

Answer 5

对css进行一些更改：

.menu {
z-index: 9999;
width: 364px;
margin-left: auto;
margin-right: auto;
}

Answer 6

我知道它很脏但是有效......在你<div class="menu">添加属性align 所以它看起来像这样：

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

然后它现在将中心菜单..

如何居中导航栏

6 个答案: