当前位置：文江博客话题详情

CSS 技巧用空白覆盖其他 div 边框？

发布于 2024-11-01 11:20:34 字数 333 浏览 7 评论 0原文

我将如何去做像这张照片这样的事情？

我尝试为 li 提供背景，将其 1px 放置在右侧，并增大 z-index >，但没有有用。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疑心病 2024-11-08 11:20:34

以下内容基于约翰的解决方案，并且还扩展了边框的高度以匹配内容的高度。

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;
}

示例此处。

The following builds on John's solution and also expands the height of the border to match the height of the content.

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;
}

Example here.

回复收藏 0 原文

落花随流水 2024-11-08 11:20:34

您可以这样做...

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

只要包含的 ul 具有 overflow: hide。

You can do this...

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

So long as the containing ul has overflow: hidden.

回复收藏 0 原文

攒眉千度 2024-11-08 11:20:34

尝试其中之一：

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

li.active {
   border-right: 0;
}

try one of these:

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

li.active {
   border-right: 0;
}

回复收藏 0 原文

时光磨忆 2024-11-08 11:20:34

我实现了这种效果，我给每个列表项一个右边框，但对于选定的列表项，我将 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/

I achieve this effect I give each of my list items a right border, but for the selected list item I change the border-color to white.

However if you want the right border to expand beyond the list items you need to set the border on the ul with a set height, and add a 1px negative margin to the list items.

For example this mark-up

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

And this 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;
}

Will achieve this result - http://jsfiddle.net/ajcw/3VMyY/

回复收藏 0 原文