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只是正常设置每个项目。它正确border 0。

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

.item:hover使悬停的项目有一个红色边框，并且它是全部4种尺寸

.item:hover +.item抓住列表中的下一个项目并删除其左边框，因为它左边的项目现在有一个红色边框。

您可以在此处试用：http://jsfiddle.net/hCK3D/

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

Answer 2

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

Answer 3

尝试这个

http://jsfiddle.net/D74mj/

我希望你得到的结果是

2个div如何有1个边界

3 个答案: