CSS：重叠边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12133791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Overlapping borders
提问by Coolcrab
I just stumbled on a problem where the shared border between a menu bar and the main content box does not go on properly (as the content box is too small)
我偶然发现了一个问题，即菜单栏和主内容框之间的共享边框无法正常显示（因为内容框太小）
Image: http://imgur.com/O3ra9
Code: http://jsfiddle.net/gh55e/2/
代码：http: //jsfiddle.net/gh55e/2/
So I was wondering if there was a way to fix the border. Maybe by giving them both one and making it overlap? Just have no idea how to do this as margin -x doesn't work.
所以我想知道是否有办法修复边界。也许通过给他们一个并使其重叠？只是不知道如何做到这一点，因为 margin -x 不起作用。
回答by alt
Give the right element a border all around, then use the margin-top and margin-left properties in the negatives to make them overlap. Here's an updated jsfiddle:
给右边的元素一个边框，然后在底片中使用 margin-top 和 margin-left 属性使它们重叠。这是一个更新的jsfiddle：
CSS:
CSS：
#right {
width: 85px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-top: -54px;
}
?
回答by Coolcrab
For later visitors, this is the CSS that eventually fixed it.
对于后来的访问者，这是最终修复它的 CSS。
#right {
width: 385px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-left: -10px;
}
You basically make a margin of 10px and move it back for 10 px
您基本上将边距设为 10 像素，然后将其移回 10 像素
