Question

菜单div溢出了父级。

“科学只是对自身的歪曲......”

<div id="header">
     <h1>TITLE</h1>
</div>
<div id="navwrap">
<ul class="nav">
    <li><a id="homenav" href="index.html">Home</a></li>
    <li><a id="linksnav" href="#">Links</a></li>
    <li><a id="contactnav" href="#">Contact</a></li>
<div class="clear"></div>
</ul>
</div>

/*
NAV BEGIN
*/

#navwrap {
    width: inherit;
    padding-top: 10px;
    padding-bottom: 10px;
    float:left;
    margin:0;
    font-family: "David Sans", "Trebuchet MS", Verdana, Sans-Serif;
    font-size:8px;
    background:#4a4a4a;
    color: #959595;
    border: 2px solid #202c28;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top: 0;
    clear: both; 
}

.nav {
    float:left;
    /* width:100%; */
    /* margin:0; */

}

.nav li {
    font-size: inherit;
    list-style:none;
    display:inline;
    /*padding:10px 2px;*/
    color: inherit;
}

.nav li a {
    margin:0px 0px;
    padding:7px;
    color: inherit;
    text-decoration:none;
    font-weight: bold;
}

.nav li a:hover {
    font-size: inherit;
    list-style:none;
    display:inline;
    background: #9ead72;
    color: #282828;
}

/*
NAV END
*/

/*
HEADWRAP BEGIN
*/
#headwrap {
    width: 880px;
    clear: both;
}
/*
HEADWRAP END
*/
/*
WATERMARK BEGIN
*/
#watermark {
    height:20px;
    margin:0px;
    padding:5px 20px;
    color:#787878;
    font-family: "David Sans", "Trebuchet MS", Verdana, Sans-Serif;
    font-size:8px;
    text-align:right;
    background:#383838 /*url(../img/tlcorner.gif) top left no-repeat */;
    border: 2px solid #202c28;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom: 0;
}

/*
WATERMARK END
*/

/*
HEADER BEGIN
*/

#header {
    height:80px;
    margin:0;
    padding:30px 20px;
    background:#3f3f3f  url(../img/headerbg.gif) bottom right no-repeat;
    color:#a8a5a5;
    font-size:95%;
    text-align:left;
    clear:both;
    border-left:2px solid #202c28;
    border-right:2px solid #202c28;
}


#header h1{
    margin:0;
    padding:0 20px;
    font-size:200%;
}

/*
HEADER END
*/

Answer 1

这种情况正在发生，因为在新的W3C盒子模型中，填充，边框和边距的计数超出了内容区域的大小。在您的情况下，内容区域的宽度为880像素。菜单栏继承了这个宽度，但它的左右两边有一个2px的边框，这增加了你所看到的4px溢出。

要深入了解该主题，您可以在方框模型上查看w3 docs或我将使用的此ADD友好explanation。

似乎CSS3有一个很好的解决方案。您可以更改框模型以包含边框，并填充到内容区域。将以下声明添加到navwrap元素：

#navwrap {
    box-sizing: border-box;
}

CSS3尚未正式化，因此每个人都有自己的实现。对于mozilla，它被称为moz-box-sizing。

Quirksmode在您可能会发现有用的主题上发布了一个不错的article。

Answer 2

#navwrap{
    width:876px;
}

这是一个快速修复。

为什么我的菜单DIV溢出其父级？

2 个答案: