Question

我有一个文本，当我按下图标时，我可以read more，当我按下另一个图标时，我可以read less。问题是，如何才能使顶部缩进，以便阅读更多和更少的图标，而不是在文本下方看到它们，并使它们（图标）居中？图标为+，-。

这是html：

 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
<input id="read-more-state-1" class="read-more-state" type="checkbox">
<span class="read-more-target">
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</span>
<label for="read-more-state-1" class="read-more-button">
<span class="read-more-button-icon"></span>
</label>
</p>

这是CSS：

.read-more-state {
  display: none;
}

.read-more-button {
  display: none;
}

@media only screen and (max-width: 600px) {   
  .read-more-target {
    opacity: 0;
    font-size: 0;
    transition: .25s ease;
  }

  .read-more-button {
    display: inline-block;
    border-radius: 0.25em;
    width: 1em;
    height: 1em;
    background: url(img/arrow%20grad.svg);
    background-size: cover;
    cursor: pointer;
  }

  .read-more-state:checked + .read-more-target {
    opacity: 1;
    font-size: inherit;
  }

  .read-more-state:checked ~ .read-more-button {
    background: url(img/arrow%20up%20grad.svg);
    background-size: cover;
    cursor: pointer;
  }
}

Answer 1

如果您希望+和- 图标出现在文本的中心并位于文本下方，则最简单的选择是使p元素相对，并且您的图标位于绝对位置。

p{
  position: relative;
  padding-bottom: 1.5em;
}
.read-more-button {
  position: absolute;
  bottom: 0px;
  left: 50%;
}

这是一个codepen链接。

如何使图标缩进

1 个答案: