CSS欺骗用空白覆盖其他的div边界？

Question

我将如何在这张照片上做点什么？

我试过给li一个背景，将它1px放在右边，然后放大z-index，但无济于事。

我还想到了li的边框并隐藏了活动边框的边框，但我需要边框与右边的内容一样长。

Answer 1

以下内容以John的解决方案为基础，并扩展边框的高度以匹配内容的高度。

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

我认为重叠可以用li里面的另一个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/