可能有一个边框重叠/取消另一个边框吗？

Question

我有两个并排的列表。 在完整代码中，可以从 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 边框，但我将正确编码选择过程以确保只有所选项目应用了相关的边框样式。

Answer 1

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