我的网站上有一个由列表组成的菜单栏。 html看起来像这样:
<div id="menu">
<ul class="menu">
<li class="menu"><a class="menu" href="#">HOME</a></li>
<li class="menu"><a class="menu" href="#">MOSAIC</a></li>
<li class="menu"><a class="menu" href="#">SUCCESS</a></li>
<li class="menu"><a class="menu" href="#">MEMBERS</a></li>
<li class="menu"><a class="menu" href="#">CONTACT</a></li>
</ul>
</div>
css看起来像这样:
#menu {
margin-left: 10%;
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;
position:absolute;
}
ul.menu {
float:middle;
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
此时我的菜单栏看起来像是跟着:
它只需要80%的网站宽度,但5个元素不会像预期的那样占据80%的20%。我该如何解决我的问题?如果您能够向我解释如果正确答案不明显并且自我解释,那么它也会非常棒。
答案 0 :(得分:3)
我的意见是使用table-cell
并将li
元素中的样式应用于这样的子元素中:
#menu {
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
position:relative;
margin: 0 auto;
}
ul.menu {
width:100%;
padding:0;
margin: 0 auto;
list-style-type:none;
}
ul{
display:table;
}
li{
display:table-cell;
text-align:center;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-left:1px solid white;
vertical-align: middle;
}
答案 1 :(得分:2)
任何边框或填充都会添加到元素的宽度,直到你告诉他们不要
box-sizing: border-box;
<强> CSS 强>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu {
margin: 0 auto;
border-top:1px solid white;
border-bottom:1px solid white;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;}
ul.menu {
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
答案 2 :(得分:1)
答案 3 :(得分:-1)
您需要将#menu的位置更改为relative或添加包含该列表的包装。我也很确定没有浮动:中间,左右(没有和继承)。
此外,我更喜欢以下内容:
ul.menu > li
{
width: 20%;
}
ul.menu > li > a
{
width: 100%;
}
为什么要在每个元素上使用菜单类?