想象 4 个并排的盒子（div）。这些是一个菜单，当一个框被选中时，它的边框是红色的，而所有其他 div 的边框都是黑色的。我遇到的问题是，是否有一种简单的方法可以使选定的 div 的相邻 div 在接触选定 div 的一侧没有黑色边框。这是因为您将有一个带有红色边框的选定 div 有第二个黑线边框，这是我不想要的。
如何让 2 个 div 表现得好像它们只有一个边框？
我正在努力完善我在这里所拥有的。
此时白色垂直边框打断了水平灰色。这不应该是这种情况，但我不知道如何改变它。
【问题讨论】：
border-right、border-top，您可以更好地控制您的边框。你有没有机会提供一张图片来展示你目前拥有的和你想要的？
您应该使用 CSS 中的相邻选择器 (+) 来实现这一点。看看，四项：
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
这是你的 CSS：
.item {
float:left;
background: #ccc;
width: 50px;
height: 50px;
border: 1px #000 solid;
border-right-width: 0;
}
.item:last-child {
border-right-width: 1px;
}
.item:hover {
border: 1px #f00 solid;
}
.item:hover + .item {
border-left-width: 0;
}
.item只是正常设置各项。它使正确的border 0。
.item:last-child 使最后一个在右侧有一个钻孔器，因为它是最后一个并且旁边没有 div 来模拟边框。
.item:hover 使悬停的项目有一个红色边框，并且都是 4 种尺寸
.item:hover +.item 抓取列表中的下一个项目并去掉它的左边框，因为它左边的项目现在在那里有一个红色边框。
你可以在这里试试：http://jsfiddle.net/hCK3D/
编辑：这个应该可以解决问题！ http://jsfiddle.net/hCK3D/7/
【讨论】：
通过结合使用负边距（与边框尺寸相同） 和所选 div 的单个 z-index，您可以实现您正在寻找的布局。
<style>
.box {
width: 50px;
height: 50px;
float: left;
border: 5px solid black;
margin-left: -5px;
}
.selected {
position: relative;
width: 50px;
height: 50px;
border: 5px solid red;
z-index: 20;
}
</style>
<div>
<div class="box"></div>
<div class="box selected"></div>
<div class="box"></div>
<div class="box"></div>
</div>
上述方法在IE7以上的所有主流浏览器中应该都是可靠的......我想它也应该适用于IE6，但我没有它可以测试。
【讨论】：
似乎解决您的问题的最简单方法是将负边距设置为活动 div。你的代码可能看起来像这样
# HTML
<div class='menu'>
<div class='item'>
Item 1
</div>
<div class='item active'>
Item 2
</div>
<div class='item'>
Item 3
</div>
<div class='item'>
Item 4
</div>
</div>
# CSS
.menu {
position: relative;
}
.menu .item {
display: inline;
border: 1px solid black;
position: relative;
z-index:1;
}
.menu .item.active {
border: 1px solid red;
z-index: 2;
margin: 0 -1px;
}
为您的目的使用 div 对我来说看起来不是 html 语义。我认为使用列表导航会更好。
PS 这是这个代码——http://jsfiddle.net/r8XRP/
【讨论】：
【讨论】：