菜单栏中由列表组成的元素宽度

时间:2014-07-29 17:48:51

标签: html css

我的网站上有一个由列表组成的菜单栏。 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;
}

此时我的菜单栏看起来像是跟着:

enter image description here

它只需要80%的网站宽度,但5个元素不会像预期的那样占据80%的20%。我该如何解决我的问题?如果您能够向我解释如果正确答案不明显并且自我解释,那么它也会非常棒。

4 个答案:

答案 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;
}

fiddle

答案 1 :(得分:2)

任何边框或填充都会添加到元素的宽度,直到你告诉他们不要

box-sizing: border-box;

JSFiddle Demo

<强> 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)

您正在使用边框 Borders为每个元素添加2px。

box-sizing: border-box;

解决方案

http://jsfiddle.net/Hc3au/

答案 3 :(得分:-1)

您需要将#menu的位置更改为relative或添加包含该列表的包装。我也很确定没有浮动:中间,左右(没有和继承)。

此外,我更喜欢以下内容:

    ul.menu > li 
    { 
       width: 20%; 
    }

    ul.menu > li > a 
    {
       width: 100%;
    }

为什么要在每个元素上使用菜单类?