html - li 被隐藏的问题，按钮向下太远

Question

我有一个简单的 html“加载更多”和“加载更少”代码。基本上它会显示几个 block ，然后您点击“加载更多”，它们就会全部显示出来。现在我对按钮向下的距离有疑问。我希望按钮位于第一组 li 的正下方，而不是下方 300 像素处。

这是我的 jsfiddle 链接:

https://jsfiddle.net/gmhfe2w7

index.html

<div class="load-more-container">
  <input type="checkbox" id="load-more" />
  <ul>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
    <li>Yeet</li>
    <li style="width: 305px; margin-left: 22px;">Yeet</li>
    <li style="margin-left: 22px;">Yeet</li>
  </ul>
  <label class="load-more-btn" for="load-more">
                        <span class="unloaded"><p                                   class="button_more">
                        Load More
                        </p></span>
                        <span class="loaded"><p                                     class="button_less">
                        Load Less
                        </p></span>
                    </label>
</div>
</div>

加载更多.css

*, *:before, *:after {
  box-sizing: border-box;
}
.load-more-container {
  width: 959px;
  margin: auto;
  position: relative;
}
.load-more-container ul {
  list-style-type: none;
  padding: 0;
}
.load-more-container ul:after {
  content: "";
  display: table;
  clear: both;
}
.load-more-container ul li {
  width: 305px;
  background: #6d11d0;
  border: 3px solid black;
  margin-bottom: 22px;
  border-radius: 10px;
  height: 100px;
  float: left;
  border-radius: 10px;
}
.load-more-container ul li:nth-child(1n + 4) {
  max-height: 0;
  border-radius: 10px;
  opacity: 0;
  transition: 0.1s ease-in;
}
.load-more-container .load-more-btn {
  text-align: center;
}
.load-more-container .load-more-btn .loaded {
  display: none;
}
.load-more-container #load-more {
  display: none;
}
.load-more-container #load-more:checked ~ ul li:nth-child(1n + 4) {
  max-height: 999px;
  opacity: 1;
  transition: 0.2s ease-in;
}
.load-more-container #load-more:checked ~ .load-more-btn .loaded {
  display: block;
}
.load-more-container #load-more:checked ~ .load-more-btn .unloaded {
  display: none;
}
.load-more-container .ld{
  width: 200px;
  border: 3px solid black;
  border-radius: 10px;
  margin-left: 380px;
  margin-bottom: 22px;
}
.load-more-container .uld{
  width: 200px;
  border: 3px solid black;
  border-radius: 10px;
  margin-bottom: 22px;
}
.margin{
  margin-top: 37px;
}
.button_more{
  background-color: aqua;
  padding: 32px 16px;
  width: 100px;
  margin: auto;
}

Answer 1

对您的 CSS 进行以下更改以检查和取消检查输入并再次检查。如果您仍然遇到问题，请告诉我。

.load-more-container #load-more:checked ~ ul li:nth-child(1n + 4) {
    max-height: 999px;
    opacity: 1;
    transition: 0.2s ease-in;
    border-width: 3px;
    margin-bottom: 22px;
}

.load-more-container ul li:nth-child(1n + 4) {
    max-height: 0;
    border-radius: 10px;
    opacity: 0;
    transition: 0.1s ease-in;
    border-width: 0;
    margin: 0;
}