中心对齐菜单,间距相等

时间:2011-12-29 06:25:48

标签: javascript html css

我有这样的菜单

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>

7 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

此方法允许您使用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。

答案 2 :(得分:1)

如果你可以添加一个包含元素(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/

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

{{1}}

希望它能解决你的问题。

答案 5 :(得分:-1)

非常简单。

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

答案 6 :(得分:-1)

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

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