CSS欺騙用空白覆蓋其他div邊界？

Question

我會如何去做這樣的事情？

我試圖給li的背景下，其定位1px的權利和更大的z-index，但無濟於事。

我也想到給li設置邊框並隱藏活動邊框的邊框，但我需要的邊框與右邊的內容一樣長。

Answer 1

下建立在約翰的解決方案，也擴大的高度邊框以匹配內容的高度。

HTML：

<div id="wrapper"> 
    <div id="menu"> 
     <ul> 
      <li>Item1</li> 
      <li class="selected">Item2</li> 
      <li>Item3</li> 
     </ul> 
    </div> 
    <div id="content"> 
     <p>Some</p><p>really</p><p>long</p><p>content</p><p>...</p> 
    </div> 
</div> 

CSS：

#wrapper { 
    display:block; 
} 
#menu { 
    display: table-cell; 
    position:relative; 
    border-right: 1px solid black; 
} 
#menu ul { 
    list-style: none; 
} 
#menu li { 
    margin-right: -1px; 
    border-style: solid; 
    border-width: 0 1px 1px 0; 
} 
li.selected { 
    border-right: 1px solid white; 
} 
#content { 
    display: table-cell; 
} 

例here。

Answer 2

你可以這樣做......

li.active { 
    position: relative; 
    right: -1px; 
    padding: 1px; 
} 

只要含有ul有overflow: hidden。

Answer 3

我認爲可以用裏面的另一個div完成重疊，並且相對位置向右移動。但是，您必須根據選定的項目來顯示/隱藏它。

Answer 4

嘗試其中之一：

li.active { 
    border-right-color: white; 
} 

li.active { 
    border-right: 0; 
} 

Answer 5

我達到這個效果，我給我的每一個列表項的右邊界，但所選擇的列表項我改變border-color爲白色。

但是，如果您希望右邊框擴展到列表項以外，您需要在設置高度上設置ul上的邊框，並向列表項添加1px的負邊距。

例如，這加價

<ul> 
    <li><a href="#">Item one</a></li> 
    <li><a href="#">Item two</a></li> 
    <li><a href="#">Item three</a></li> 
    <li class="at"><a href="#">Item four</a></li> 
    <li><a href="#">Item five</a></li> 
    <li><a href="#">Item six</a></li> 
</ul> 

而這個CSS

ul { 
    width: 100px; 
    height: 200px; 
    border-right: 1px solid #000; 

} 

li { 
    border-bottom: 1px solid #000; 
    border-right: 1px solid #000; 
    margin-right: -1px; 
} 

li.at { 
    border-right: 1px solid #FFF; 
} 

將實現這樣的結果 - http://jsfiddle.net/ajcw/3VMyY/