Question

这是我的水平菜单的css代码，它是跨浏览器，它工作得很好，它有1个小故障。：）

包装所有内容的#menu必须具有100％的宽度，但是当我在其上放置边框时，边框会增加宽度，使其变大并拧紧我的布局。我所做的是使用jquery来减去2像素边界。有没有办法用css做到这一点？

这是菜单的css：

#menu {
width: 100%;
margin: 0 0 1em 0;
padding: 0.5em 0 0 0;
border-right: solid 1px #555;
border-left: solid 1px #555;
border-bottom: solid 1px #555;
}
#menu ul {
margin: 0 0 0 0.5em;
padding: 0;
list-style-type: none;
}
#menu li {
margin: 0;
padding: 0;
float: left;
width: 20%;
line-height: 1.5em;
margin-right: 1em;
margin-bottom: 0.5em;
background: url(images/headline.jpg) top repeat-x;
border: solid 1px #555;
text-align: center;
}
#menu a {
display: block;
width: 100%;
font-size: 70%;
text-decoration: none;
}
#menu a:hover {
background: #000 none;
}

一些说明：菜单必须用div来包装，用于设置背景颜色，左边距/填充等等。我发现无法为UL本身设置样式，因为我无法清除其中的浮动。因此，OL的高度总是等于零。

非常感谢！

Answer 1

使用outline代替border。它以相同的方式创建“边框”，只是将它们放在框架的内部，而不是像border那样放在外面。

Answer 2

如果您可以忽略IE7及以下版本，则可以使用box-sizing。

从我的水平列表菜单中减去边框宽度

2 个答案: