Question

我的标记如下：

<nav class="nav">
  <ul class="list">
    <li class="list-item visible">
      Item 1
    </li>
    <li class="list-item">
      Item 2
    </li>
    <li class="list-item">
      Item 3
    </li>
  </ul>
</nav>

在上面的标记中，“ nav”标记为overflow: auto。可见列表项的伪类（之后）具有背景颜色高度。

我的问题是：在可见列表项下方，nav的边框底部不可见。边框底部后的可见列表项的伪类应将其覆盖。

是否有可能在不添加其他元素或消除溢出的情况下完成此任务：nav的自动操作

Answer 1

您的<nav/>类.nav的元素是用overflow: auto指定的；当您的li.nav-item有:after时，它将变成一个可滚动的元素。更简单的方法是删除overflow:auto上的.nav

Answer 2

我看到两个问题：

具有overflow: auto的导航栏意味着如果其内容过多，它将具有滚动条。也许您打算使用其他东西。
您正在以奇怪的方式混合rem和px单位，并期望情况会保持一致。根据Chrome的检查工具，::after元素的高度为1.6像素，显然在我的设备上该元素被裁剪为1像素。因此，bottom: -2px;指令将元素完全移动到列表下方，要覆盖的边框下方。使用1px的高度和-1px的底部位置可以解决此问题。

Answer 3

好吧，您不能将元素包含在剪切父对象中，也不能将元素剪切。因此，您必须将元素带出其父元素-做到这一点的一种方法是使其成为绝对元素。

添加以下内容：

.list-item.visible {
  position: absolute;
}
.list-item.visible + .list-item {
  margin-left: 72px;
}

并且由于有人要求提供堆栈摘要，因此内容很完整：

.nav {
  overflow: auto;
  background-color: wheat;
  border-bottom: 1px solid black;
}

.list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.list-item {
  margin: 0;
  position: relative;
  font-size: 20px;
  padding: 10px;
}

.list-item::before {
  content: "";
  position: absolute;
  height: .3rem;
  width: 100%;
  top: 0;
} 

.list-item.visible::after {
  content: "";
  position: absolute;
  background-color: #fff;
  height: .1rem;
  width: 100%;
  bottom: -1px;
  left: 0;
}

.list-item.visible {
  position: absolute;
}
.list-item.visible + .list-item {
  margin-left: 72px;
}

<nav class="nav">
  <ul class="list">
    <li class="list-item visible">
      Item 1
    </li>
    <li class="list-item">
      Item 2
    </li>
    <li class="list-item">
      Item 3
    </li>
  </ul>
</nav>

注意：您可能虽然这样做，但是将绝对值放在:: after上；相反，它必须位于:: after的父级上；列表项本身。

绝对定位的元素未在溢出父对象内显示

3 个答案: