0
243
Vistasel signo más no se mueve hacia arriba o hacia abajo
He estado tratando de mover este lapso (+ signo) un poco hacia abajo para que esté en línea con la pregunta, he estado probando el margen, el relleno superior o inferior, pero nada funciona. intenté eliminar el otro relleno de las clases principales y aún no funcionó. alguien puede detectar mi error, gracias :)
(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>
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Uno de mis retos favoritos. Era un problema de la line-height y demás. Agregué estos:
.plusminus { font-weight: 100; font-size: xxx-large; line-height: 0; position: relative; top: 0.15em; }Espero que esto te dé cuál es la razón.
Avance
Aquí está el código completo:
(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>
·
Juan Pablo Isaza
Denunciar
0
Puede usar la propiedad flexbox para mover este lapso (+ signo) un poco hacia abajo para que esté en línea con la pregunta,
(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>
·
Juan Pablo Isaza
Denunciar
0
es debido al tamaño de fuente que le dio a plusminus en lugar de esto, puede darle el tamaño de fuente a su parent class .
·
Juan Pablo Isaza
Denunciar
Responde la pregunta