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

尝试使用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 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; }

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

Answer 3

如果你可以添加一个包含元素（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元素设置为{{1} （您还需要从width: 100%中删除边距并添加li）请参阅：http://jsfiddle.net/Wexcode/bKH79/2/

Answer 4

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

Answer 5

容器宽度到底是多少？好吧让我假设它960px现在给width元素ul list item，以便600px不会进入第二行。假设它已经CENTER了在这种情况下，您在.container{width:960px;} .container ul{width:600px;margin:auto}中制作菜单项的CSS将是：

{{1}}

希望它能解决你的问题。

Answer 6

非常简单。

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

Answer 7

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

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

中心对齐菜单，间距相等

7 个答案: