李被隐藏的问题，按钮太远了

时间：2018-10-30 00:07:41

标签： html css

我有一个简单的HTML“ Load More”和“ Load Less”代码。基本上，它显示了几个块，然后您单击“加载更多”，所有这些都显示了。现在我对按钮的按下距离有疑问。我希望按钮位于第一组li的正下方，而不是下方的300px。

这是我的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>

loadmore.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;
}

3 个答案:

答案 0 :(得分：0)

对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;
}

答案 1 :(得分：0)

将以下规则添加到您的CSS代码中：

.load-more-container #load-more:not(:checked) ~ ul li:nth-child(1n + 4) {
    border: 0;
    margin: 0;
}

答案 2 :(得分：0)

您不应该使用opacity CSS，因为它不可见，但是它在DOM中使用其元素大小。尝试使用display属性。浏览JSFiddle观看直播。

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>

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;
  display: none;
}

.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;
  display: block;
}

.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, .button_less {
  background-color: aqua;
  padding: 32px 16px;
}
相关问题
最新问题