div-content 可见虽然 div-height = 0

Question

我在 div 中创建了一个 ul。 当我设置 div {height: 0;} 时，我希望 ul 消失，但列表仍然可见。

overflow:hidden 使列表不可见，但似乎仍然对 div 的高度有影响。

diaplay:none 有效，但列表应该有过渡效果。 这就是为什么我想将高度设置为 0。

我如何使列表消失并返回过渡？

 html, body { background-color: gray } .toggle { width: 100%; display: flex; justify-content: center; align-content: center; margin-top: 5vh; background-color: #ff7f7f; } .toggle ul li { display: flex; justify-content: center; align-items: center; list-style: none; width: 35vw; height: 6vh; margin-bottom: 5px; border: 2px solid #ffffff; border-radius: 0px; font-size: 3vh; color: #fff; font-weight: 500; cursor: pointer; transition: all 0.5s; }

 <div class="toggle"> <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> <li>DDD</li> </ul> <ul> <li>EEE</li> <li>FFF</li> <li>GGG</li> <li>HHH</li> </ul> </div>

isolated problem

完全问题

完整问题的图像它应该看起来像使用 display: none，因为 overflov:hidden 仍然对布局有影响。

Answer 1

你有margin-top: 5vh; 在完整示例中的.toggle类上。

元素的高度按预期为0，但您为元素指定的边距当然仍然受到尊重。