Question

我在div内做了一个ul。我希望在设置div {height：0;}时ul会消失，但是列表仍然可见。

overflow：hidden使该列表不可见，但似乎仍会影响div的高度。

diaplay：无作用，但列表应具有过渡效果。这就是为什么我要将高度设置为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

full problem

image of full problem 看起来应该像使用display：none，因为overflov：hidden仍然会对版面产生影响。

Answer 1

完整示例中，您在margin-top: 5vh;类中拥有.toggle。

该元素的高度为预期的0，但是您为该元素指定的边距当然仍然得到遵守。

div内容可见，但div-height = 0

1 个答案: