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

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 边框，但我将正确编码选择过程以确保只有选定的项目应用了相关的边框样式。

标签： htmlcss

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>