[英]Div-content visible althought div-height = 0
我在 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>
完整問題的圖像它應該看起來像使用 display: none,因為 overflov:hidden 仍然對布局有影響。
你有margin-top: 5vh;
在完整示例中的.toggle
類上。
元素的高度按預期為0,但您為元素指定的邊距當然仍然受到尊重。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.