簡體   English   中英

div-content 可見雖然 div-height = 0

[英]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>

isolated problem

完全問題

完整問題的圖像它應該看起來像使用 display: none,因為 overflov:hidden 仍然對布局有影響。

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

元素的高度按預期0,但您為元素指定的邊距當然仍然受到尊重。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM