Question

这是我的HTML和CSS（裸露的骨头）：

.tall-element:before {
        height: 2000px;
        position: absolute;
        bottom: 0;
        background-color: #000;
        width: 10px;
        display: block;
        content: " ";
    }

<ul>
    <li>
    </li>
    <li class="element-i-want-do-use-to-hide">
    </li>
    <li class="tall-element">
    </li>
</ul>

这（有意地）创建了一行我希望能够将overflow:hidden设置为.element-i-want-do-use-to-hide元素，但是我不能完全做到这一点。

我可以将overflow-y: hidden设置为<ul>，这将导致换行，这是我要寻找的效果，除了我想将该换行应用于相邻元素（在这种情况下，为.element-i-want-do-use-to-hide元素）。

有人知道这样做的方法吗？

Answer 1

您的意思是这样吗？

.tall-element:before {
    height: 2000px;
    position: absolute;
    bottom: 0;
    background-color: #000;
    width: 10px;
    display: block;
    content: " ";
}

.element-i-want-do-use-to-hide {
  position: relative;
}

.element-i-want-do-use-to-hide:before {
    height: 2000px;
    position: absolute;
    z-index: 1;
    top: 0;
    background-color: #FFF;
    width: 10px;
    display: block;
    content: " ";
}

<ul>
    <li>
    </li>
    <li class="element-i-want-do-use-to-hide">
    </li>
    <li class="tall-element">
    </li>
</ul>

Answer 2

这是通过使用overflow-y：auto来解决的，它包含了无序列表，然后将其他li标签的z-index设置为高于tall元素

隐藏没有容器的强制溢出

2 个答案: