为什么我的菜单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 
*/

来源

2010-01-04 Alex C

最好使用#header div设置边框的样式，然后导航应该适合。 – 2010-01-04 06:31:34

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

要获得对该主题的深入了解，您可以结算w3 docs上的盒子模型或在此ADD add友好explanation，我会使用。

看来CSS3已经很好地解决了这个问题。您可以将框模型更改为包含边框，并填充到内容区域中。以下声明添加到您的navwrap元素：

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

CSS3还没有正式的，所以每个人都有自己的实现。对于Mozilla，它被称为moz-box-sizing。

Quirksmode发布了一个不错的article关于您可能会发现有帮助的话题。

来源

2010-01-04 09:51:05 Anurag

#navwrap{ 
    width:876px; 
}

这是一个快速解决方案。

来源

2010-01-04 06:25:47

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

回答

相关问题