CSS盒子模型問題（計算寬度和填充）

Question

當我有一個高度爲100％的寬度爲&的元素和10px填充時，則此元素將其父元素的100％與其周圍的10px相加。

我知道這是合乎邏輯的div，跨度，但在我看來，要關閉父元素是相當刺激性的，當涉及到

我創建這個菜單昨天鏈接，按鈕等，嘗試懸停在子菜單鏈接也希望看到什麼是錯的：

http://jsfiddle.net/ps5Tf/

溢出：隱藏會做的事情，但它隱藏了第三級菜單以及：

http://jsfiddle.net/ps5Tf/1/

（懸停功能>兩個示例中的功能＃5查看區別）

我不想添加nbsps;等等。

任何簡單的解決方案？

Answer 1

不要在要以100％寬度+填充顯示的元素上使用浮點數。如果您必須使用浮動，則不要將填充應用於具有100％寬度+浮動的元素。相反，添加一個嵌套的元素p，如果它的文本或跨度沒有浮動並且有填充。這樣做也將幫助您避免在IE中出現問題。

http://jsfiddle.net/ps5Tf/6/

這是你的工作CSS：

body { 
    background-color: #eee; 
} 

#menu { 
    list-style-type: none; 
} 

#menu li { 
    position: relative; 
    display: inline; 
} 

#menu li a { 
    display: inline-block; 
    height: 60px; 
    overflow:hidden; 
    padding: 0 15px; 
    text-decoration: none; 
    font: 14px/56px "Lucida Sans Unicode"; 
    color: #444; 
} 

/* 1st level menu */ 

#menu li ul { 
    width: 200px; 
    position: absolute; 
    left: 0; 
    display: block; 
    padding: 0; 
    border: 1px solid #BBBBBB; 
    background-color: #ddd; 
    border-top: 0; 

} 

#menu li ul li { 

} 

#menu li ul li a { 
    padding: 0 7px; 
    height: 50px !important; 
    line-height: 50px; 
    display: block; 
} 

#menu li ul li a:hover { 
    background-color: #fff; 
} 

/* 2nd level menu */ 

#menu li ul li ul { 
    position: absolute; 
    top: 0; 
    left: 200px; 
} 

/* hide sub-menus */ 

.sub-menu { 
    visibility: hidden; 
} 

Answer 2

的問題是，錨的寬度爲100％和填充過，這就是爲什麼亮點熄滅名單。從CSS中刪除寬度。

#menu li ul li a { 
padding: 0 7px; 
height: 50px !important; 
line-height: 50px; 
display: block; 
width: 100%; 
} 

Answer 3

如果刪除您填充#menu li ul li a{}高亮不會溢出 http://jsfiddle.net/ps5Tf/2/

Answer 4

也許創造了白色圖像的寬度和你想要的高度並將其設置爲懸停背景會做什麼，你需要。不理想，但我沒有看到任何其他的方式來避免給你的限制溢出。

Answer 5

有幾件事情，但你說你知道的寬度，然後簡單的解決方法是不使用寬度上a - display: block;自動使得它需要它的父母寬度 （和高度實際上） 減去你想要的任何填充使用，

這裏只有一些CSS其中糾正問題，使得它在IE7中工作了這是之前沒有..

body { 
    background-color: #eee; 
} 

#menu, #menu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#menu li { 
    display: inline; 
    float: left; 
    /* position: relative; put this on the hover for IE7 */ 
} 

#menu li:hover {position: relative;} 

#menu li a { 
    display: block; 
    padding: 0 15px; 
    text-decoration: none; 
    font: 14px/56px "Lucida Sans Unicode"; 
    color: #444; 
} 

/* 1st level menu */ 

#menu li ul { 
    width: 200px; 
    position: absolute; 
    left: auto; /* not zero for IE7 */ 
    border: 1px solid #BBBBBB; 
    background-color: #ddd; 
} 

#menu li ul li { 
    width: 100%; 
} 

#menu li ul li a { 
    display: block; 
    padding: 0 7px; 
    height: 50px; 
    line-height: 50px; 
} 

#menu li ul li a:hover { 
    background-color: #fff; 
} 

/* 2nd level menu */ 

#menu li ul li ul { 
    top: 0; 
    left: 100%; 
} 

/* hide sub-menus */ 

.sub-menu { 
    visibility: hidden; 
} 

/* instead of jQuery for demo */ 
#menu li:hover > .sub-menu {visibility: visible;) 

Answer 6

爲什麼不把LIS的寬度：

http://jsfiddle.net/KS2Gg/

Answer 7

一般而言，您不希望在display: block;元素上使用100％寬度（有些情況下您會這樣做，但這通常是相互衝突的想法）。

反正display: block;延伸母體的整個寬度，幷包括與它的填充。