gpt4 book ai didi

html - 可能有一个边界重叠/取消另一个边界?

转载 作者:行者123 更新时间:2023-11-28 14:33:10 25 4
gpt4 key购买 nike

我有两个并排放置的列表。在完整代码中,将能够从 MainList 中选择一个列表项,这将显示 SubList 中的相关列表项。我想要的是 MainList 的右边框与 SubList 的左边框重叠,使其看起来像在 MainList 中选择的结果显示 SubList 元素。

ul {
list-style: none;
}

.BigContainer {
border: 2px solid #d50f67;
border-radius: 5px;
margin: 10px 0;
padding: 5px;
overflow: auto;
}

.MainListContainer {
width: 50%;
float: left;
}

.MainListItem {
border-bottom: 1px solid #ddd;
border-right: 1px solid white;
padding: 5px;
z-index: 2;
}

.MainListItem:last-of-type {
border: none;
}

.SubListContainer {
width: 45%;
float: left;
border: 1px solid #ddd;
border-radius: 5px;
}

.SubListItem {
padding: 5px;
z-index: 1;
}
<div class="BigContainer">
<div class="MainListContainer">
<ul class="MainList">
<li class="MainListItem">List Option A</li>
<li class="MainListItem">List Option B</li>
<li class="MainListItem">List Option C</li>
</ul>
</div>
<div class="SubListContainer">
<ul class="SubList">
<li class="SubListItem">Sub-Option 1</li>
<li class="SubListItem">Sub-Option 2</li>
<li class="SubListItem">Sub-Option 3</li>
<li class="SubListItem">Sub-Option 4</li>
<li class="SubListItem">Sub-Option 5</li>
</ul>
</div>
</div>

因此,MainList 的右边界将是白色/透明的,以基本上删除 SubList 边界的一部分。我很欣赏,目前,实现这一点会删除比预期更多的 SubList 边框,但我会正确编写选择过程的代码,以确保只有所选元素应用了相关的边框样式。

最佳答案

为选中项添加selected类,然后添加

.selected:after{
content:"";
position: absolute;
right:-2px;
top:0;
width: 1px;
height: 100%;
background-color: white;
}

这将被放置在您想要的位置。请注意,MainListItem 需要有一个 position: relative; 才能使位置起作用。

.selected:after{
content:"";
position: absolute;
right:-2px;
top:0;
width: 1px;
height: 100%;
background-color: white;
}

ul {
list-style: none;
}

.BigContainer {
border: 2px solid #d50f67;
border-radius: 5px;
margin: 10px 0;
padding: 5px;
overflow: auto;
}

.MainListContainer {
width: 50%;
float: left;
}

.MainListItem {
border-bottom: 1px solid #ddd;
border-right: 1px solid white;
padding: 5px;
z-index: 2;
position: relative;
}

.MainListItem:last-of-type {
border: none;
}

.SubListContainer {
width: 45%;
float: left;
border: 1px solid #ddd;
border-radius: 5px;
}

.SubListItem {
padding: 5px;
z-index: 1;
}
<div class="BigContainer">
<div class="MainListContainer">
<ul class="MainList">
<li class="MainListItem">List Option A</li>
<li class="MainListItem selected">List Option B</li>
<li class="MainListItem">List Option C</li>
</ul>
</div>
<div class="SubListContainer">
<ul class="SubList">
<li class="SubListItem">Sub-Option 1</li>
<li class="SubListItem">Sub-Option 2</li>
<li class="SubListItem">Sub-Option 3</li>
<li class="SubListItem">Sub-Option 4</li>
<li class="SubListItem">Sub-Option 5</li>
</ul>
</div>
</div>

关于html - 可能有一个边界重叠/取消另一个边界?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53915483/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com