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只設置了每個項目的正常進行。它是正確的border 0.

.item:last-child使得它最後一個在右側有一個鑽孔，因爲它是最後一個，並且在它旁邊不會有一個div來模擬邊界。

.item:hover使得懸停的項目有一個紅色的邊框，它的所有4種尺寸

.item:hover +.item抓住下一個項目在列表中，因爲該項目擺脫它的左邊框的到左邊的，現在有一個紅色邊界。

你可以在這裏嘗試一下：http://jsfiddle.net/hCK3D/

編輯：這一個應該做的伎倆！ http://jsfiddle.net/hCK3D/7/

Answer 2

通過使用負邊距（與邊框尺寸相同）和所選div的單一z-索引的組合，您可以實現所需的佈局。

<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/

Answer 4

試試這個

http://jsfiddle.net/D74mj/

我希望這是你requried