等间距居中对齐菜单

Question

我有这样的菜单

Home  About  Privacy  Shopping  Contact Us

我想在其容器的中心显示此菜单（无论容器的宽度是多少）。我可以为这些列表项应用 20% 的宽度，但是由于文本大小不同，一些列表项之间的间距更大，而其他的则几乎没有

<div id="container">
   <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>Privacy</a></li>
      <li><a>Shopping</a></li>
      <li><a>Contact us</a></li>
   </ul>
</div>

Answer 1

在 CSS 中水平居中元素的最佳方法是给它一个特定的宽度，然后给它margin: auto;。这是我快速制作的一个示例。您可以看到ul（蓝色边框）的宽度为 300px，它位于 500px 容器（红色边框）内的中心位置：http://jsfiddle.net/r6Wwf/4/。您可以随意分隔列表元素。

Answer 2

此方法允许您使用 20% 的宽度并将容器中的项目居中，同时保持每个项目的宽度相同。

ul { 
list-style-type: none; 
width: 700px; 
margin: 0 auto; 
}

#container { 
width: 800px; 
background: #CC9;
}

li { display: block; 
float: left; 
width: 20%; 
margin-left: -5px;
background: #399; 
text-align: center; 
border: solid black 1px; 
color: white; 
}

你可以在这里查看...http://jsfiddle.net/r6Wwf/15/

我添加了一个负边距来补偿我添加的边框，以便您更好地了解它的工作原理。我还将ul 的宽度设置为700px。这可以是任何宽度。

要将整个菜单设置在容器的中心，请将其添加到您的 css 中：

ul { margin: 0 auto; }

然后为您的容器添加宽度。这一切都在小提琴中。您可以将容器的宽度设置为您想要的任何值。我有 800 像素的。

Answer 3

很简单。

div#container {
    width: 300px;
    margin: auto 0;
}
div#container li {
    display: inline-block;
    padding: 15px;
}

Answer 4

您肯定需要编写一些 JavaScript 来实现这一点。我就是这样做的……http://jsfiddle.net/rb39A/1/

通过使用一点 jQuery，您可以获得您正在寻找的动态大小的容器。

Answer 5

尝试使用 Flex Box 布局 (Demo)：

#container ul {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal
    }

#container li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    border: solid 1px #000;
    text-align: center
    }

Answer 6

容器的宽度到底是多少..？ 好的，让我假设它的960px 现在将width 赋予您的ul 元素，这样list item 就不会进入第二行。假设它现在采用600px，在这种情况下，您的CSS 用于制作菜单项CENTER 将是：

.container{width:960px;}
.container ul{width:600px;margin:auto}

希望它能解决你的问题。

Answer 7

如果您可以添加包含元素（nav 可能是最合适的），这里有一个适合您的解决方案：

HTML：

<nav>
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Shopping</a></li>
      <li><a href="#">Contact us</a></li>
   </ul>
</nav>

CSS：

nav { overflow: hidden; }
nav ul {
    float: left;
    position: relative;
    left: 50%;
    padding: 0; 
    list-style: none; }
nav ul li {
    float: left;
    position: relative;
    right: 50%;
    margin: 0 10px; }
nav ul li a {
    padding: 5px;
    display: block; }

预览：http://jsfiddle.net/Wexcode/bKH79/

如果您希望每个 li 元素占容器宽度的 20%，只需将容器设置为具有 width: 100% 并将每个 li 元素设置为具有 width: 100%（您还需要删除li 的边距并添加 text-align: center)。
见：http://jsfiddle.net/Wexcode/bKH79/2/