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

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 本身的样式，因为我无法清除其中的 float 。因此，OL 的高度始终为零。

非常喜欢!

Answer 1

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