Question

当我有一个100％宽度的元素＆amp;高度和10px填充然后这个元素占用它的100％和它周围的10px。

我知道这对div，跨度来说是合乎逻辑的，但在我看来，当涉及到链接，按钮等时，偏离父元素是相当恼人的。

昨天我创建了这个菜单，尝试在子菜单中悬停链接，看看有什么不对：

http://jsfiddle.net/ps5Tf/

溢出：隐藏会做的事情，但它也隐藏了第三级菜单：

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

（悬停功能＆gt;两个示例中的功能＃5以查看差异）

我不想添加nbsps;等

任何简单的解决方案？

Answer 1

有一些东西，但正如你所说，你知道宽度然后简单的解决方案是不使用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 2

不要在要以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 3

问题是锚的宽度为100％，填充也是如此，这就是突出显示从列表中消失的原因。从css中删除宽度。

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

Answer 4

如果删除#menu li ul li a{}上的填充，则突出显示不会溢出 http://jsfiddle.net/ps5Tf/2/

Answer 5

也许创建一个白色图像，你想要的宽度和高度，并将其设置为悬停的背景将做你需要的。不理想，但鉴于你的限制，我没有看到任何其他避免溢出的方法。

Answer 6

为什么不设置LI的宽度：

http://jsfiddle.net/KS2Gg/

Answer 7

通常，您不希望在display: block;元素上使用100％宽度（在某些情况下您会这样做，但这通常是相互矛盾的想法）。

无论如何，display: block;会拉伸父级的整个宽度并包含填充。

CSS框模型问题（计算宽度和填充）

7 个答案: