html - 2个div如何有1个边框

Question

想象一下并排的 4 个盒子（div）。这些是一个菜单，当一个框被选中时，它的边框是红色的，而所有其他 div 的边框都是黑色的。我遇到的问题是，是否有一种简单的方法可以使选定的 div 的相邻 div 在接触选定 div 的一侧没有黑色边框。这是因为您将有一个带有红色边框的选定 div 具有我不想要的黑线的第二个边框。

你怎样才能让 2 个 div 表现得好像它们有一个边框？

我正在努力完善我在这里所拥有的东西。

http://jsfiddle.net/hCK3D/1/

目前，白色垂直边框打断了水平灰色。这不应该是这种情况，但我不知道如何改变它。

Answer 1

您应该使用 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;
}

​<code>.item 只是正常设置每个项目。它使正确的border0。

.item:last-child使最后一个在右侧有一个钻孔器，因为它是最后一个并且旁边没有 div 来模拟边界。

.item:hover使悬停的项目具有红色边框，并且都是 4 种尺寸

.item:hover +.item抓取列表中的下一个项目并去掉它的左边框，因为它左边的项目现在在那里有一个红色边框。

你可以在这里试试：http: //jsfiddle.net/hCK3D/

编辑：这个应该可以解决问题！http://jsfiddle.net/hCK3D/7/

Answer 2

通过结合使用负边距（与边框相同的尺寸）和所选 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，但我没有它可以测试。

Answer 3

似乎解决问题的最简单方法是将负边距设置为活动 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/ ​</p>

Answer 4

试试这个

http://jsfiddle.net/D74mj/

我希望这是你要求的结果