加號不上下移動

我一直在嘗試將這個跨度（ 號）向下移動一點，以便它與問題一致，一直在嘗試邊距、填充頂部或底部，但沒有任何效果。嘗試從父類中洗掉其他填充仍然無效。誰能發現我的錯誤，謝謝:)

(function($) {
    $(function() {
        $('.faqs dt').click(function () {
            $(this).children('.plusminus').text($(this).children('.plusminus').text() == ' ' ? '?' : ' ');
            $(this).next('.faqs dd').slideToggle(500);
        });
    });
})(jQuery);

    .faqs {
      cursor: pointer;
      border: #edeceb solid 1px;
      border-radius: 3px;
      margin: 20px 0;
      padding: 30px 35px 10px;
      line-height: 200%;
      }
      dt{
        font-size: 1.125rem;
        font-weight: 700;
        margin-top: -20px;}
      .plusminus{
        font-weight: 100;
        font-size: xxx-large;
      }
      .answer{
        display: none;
        margin: 10px 0;
      }
      .date{
        color: #a6a6a6;
        font-size: 0.750rem;
      }
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab--container">
  <div class="tab--content">
  <div class="content--faqs">
    <div class="content--title">
    Q&A
    </div>
    <dl class="faqs">
    <dt><span class="plusminus"> </span> Question 1?</dt>
    <dd class="answer">Answer 1.<br>
    <div class="date">
    Answer date.
    </div></dd>
    </dl>
    <dl class="faqs">
    <dt><span class="plusminus"> </span> Question 2?</dt>
    <dd class="answer">Answer 2.<br>
    <div class="date">
     Answer date.
    </div></dd>
    </dl>

    </div>
  </div>
</div>

uj5u.com熱心網友回復：

我最喜歡的挑戰之一。這是一個問題line-height等等。我添加了這些：

.plusminus {
  font-weight: 100;
  font-size: xxx-large;
  line-height: 0;
  position: relative;
  top: 0.15em;
}

希望這能給你什么原因。

預覽

這是完整的代碼：

(function($) {
  $(function() {
    $('.faqs dt').click(function() {
      $(this).children('.plusminus').text($(this).children('.plusminus').text() == ' ' ? '?' : ' ');
      $(this).next('.faqs dd').slideToggle(500);
    });
  });
})(jQuery);

.faqs {
  cursor: pointer;
  border: #edeceb solid 1px;
  border-radius: 3px;
  margin: 20px 0;
  padding: 30px 35px 10px;
  line-height: 200%;
}

dt {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: -20px;
}

.plusminus {
  font-weight: 100;
  font-size: xxx-large;
  line-height: 0;
  position: relative;
  top: 0.15em;
}

.answer {
  display: none;
  margin: 10px 0;
}

.date {
  color: #a6a6a6;
  font-size: 0.750rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab--container">
  <div class="tab--content">
    <div class="content--faqs">
      <div class="content--title">
        Q&A
      </div>
      <dl class="faqs">
        <dt><span class="plusminus"> </span> Question 1?</dt>
        <dd class="answer">Answer 2.<br>
          <div class="date">
            Answer date.
          </div>
        </dd>
      </dl>
      <dl class="faqs">
        <dt><span class="plusminus"> </span> Question 2?</dt>
        <dd class="answer">Answer 2.<br>
          <div class="date">
            Answer date.
          </div>
        </dd>
      </dl>

    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您可以使用 flexbox 屬性將此跨度（ 號）向下移動一點，使其符合問題，

(function($) {
    $(function() {
        $('.faqs dt').click(function () {
            $(this).children('.plusminus').text($(this).children('.plusminus').text() == ' ' ? '?' : ' ');
            $(this).next('.faqs dd').slideToggle(500);
        });
    });
})(jQuery);

 .faqs {
      cursor: pointer;
      border: #edeceb solid 1px;
      border-radius: 3px;
      margin: 20px 0;
      padding: 30px 35px 10px;
      line-height: 200%;
      }
      dt{
        display: flex;
        font-size: 1.125rem;
        font-weight: 700;
        margin-top: -20px;}
      .plusminus{
        font-weight: 100;
        font-size: xxx-large;
      }
      .answer{
        display: none;
        margin: 10px 0;
      }
      .date{
        color: #a6a6a6;
        font-size: 0.750rem;
      }
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab--container">
  <div class="tab--content">
  <div class="content--faqs">
    <div class="content--title">
    Q&A
    </div>
    <dl class="faqs">
    <dt><span class="plusminus"> </span> Question 1?</dt>
    <dd class="answer">Answer 2.<br>
    <div class="date">
    Answer date.
    </div></dd>
    </dl>
    <dl class="faqs">
    <dt><span class="plusminus"> </span> Question 2?</dt>
    <dd class="answer">Answer 2.<br>
    <div class="date">
     Answer date.
    </div></dd>
    </dl>

    </div>
  </div>
</div>

uj5u.com熱心網友回復：

它是因為你給了這個plusminusinsted 的字體大小，你可以給它的字體大小parent class。

標籤：javascript html css

上一篇：ReactJW播放器如何獲取當前視頻時長？

下一篇：如何將此解決方案從O(n^2)轉換為O(n)？