Question

当链接保持关闭状态时，其底边很大。我需要减少边距，并在向下滑动时将内容下推到下方。

#menu-toggle2 {
  display: none;
}

#collapse-menu2 {
  transition: transform 0.3s;
  transform-origin: top;
}

input:not(:checked)~#collapse-menu2 {
  transform: scaleY(0);
}

.pinkdok {
  color: #FF4870;
  cursor: pointer;
}

<h4>Архив прошлых уведомлений</h4>
<input id="menu-toggle2" type="checkbox">
<label id="menu-label" for="menu-toggle2">
  <h6 class="pinkdok">Подробнее</h6>
</label>
<ul id="collapse-menu2">
  <li>Должники на 01.01.2019<br>
    <a class="pinkdok" href="https://domain.ru/wp-content/uploads/2019/02/Dolgi01012019g.xls.pdf" target="_blank" rel="noopener noreferrer">Скачать документ (.pdf)</a></li>
</ul>

Answer 1

当您的元素在DOM中不可见时，这并不意味着它们不会占用空间。 UL元素仍有一定高度。虽然这是一个快速修复。这将帮助您前进。

例如以下CSS：

opacity: 0; /* The element is invisible, but still takes space */
---
display: none; /* The element is invisible, and won't take any space */

在您的示例中，您使用了scaleY()，但该元素仍将占据DOM中的空间。

#menu-toggle2 {
  display: none;
}

#collapse-menu2 {
  transition: transform 0.3s;
  transform-origin: top;
  height: auto;  /* added to example */
}

input:not(:checked)~#collapse-menu2 {
  transform: scaleY(0);
  height: 0; /* added to example */
}

.pinkdok {
  color: #FF4870;
  cursor: pointer;
}


/* Not question related */

p {
  margin: 0;
}

<h4>Архив прошлых уведомлений</h4>
<input id="menu-toggle2" type="checkbox">
<label id="menu-label" for="menu-toggle2">
  <h6 class="pinkdok">Подробнее</h6>
</label>
<ul id="collapse-menu2">
  <li>Должники на 01.01.2019<br>
    <a class="pinkdok" href="https://gbu-chs.ru/wp-content/uploads/2019/02/Dolgi01012019g.xls.pdf" target="_blank" rel="noopener noreferrer">Скачать документ (.pdf)</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit nibh, suscipit placerat euismod et, interdum at metus. Cras sit amet hendrerit risus. Phasellus porttitor, eros vitae elementum consequat, leo enim varius nibh, sit amet ullamcorper massa
  lorem id magna. Aenean vel risus in ligula iaculis facilisis. Curabitur ut feugiat nulla, ac bibendum odio. Suspendisse dignissim ligula vel diam condimentum aliquam. Etiam tincidunt eleifend nisi eget feugiat. Donec ligula lorem, dignissim vitae varius
  quis, pulvinar vel nibh. In hac habitasse platea dictumst.</p>

减少边距并将内容下推

1 个答案: