2个div如何有1个边界

Question

想象一下并排4个盒子(divs).这是一个菜单,当选择一个框时,其边框为红色,所有其他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;
}

.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但是我没有它可以用来测试.