爲什麼我的菜單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溢出其父項？

回答

相關問題