我有这样的菜单
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>
答案 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,您可以获得您正在寻找的动态大小的容器。