Удалить лишний пробел поверх надписей из CSS стилизованного флажка - PullRequest
Новая
       15

Удалить лишний пробел поверх надписей из CSS стилизованного флажка

0 голосов
/ 23 февраля 2019

Мне нужна помощь.

Я "гуглю", чтобы найти решение, но я не смог выяснить, почему я получаю это дополнительное место поверх каждого ярлыка моего CSS-стиляфлажки.

Также я не нашел подобного вопроса здесь о переполнении стека.

Даже при использовании режима разработчика Chrome и Firefox я не вижу ничего (без полей, без заполнения), которое генерируетэто дополнительное пространство. 

<div class="row">
    <div class="col-12 col-lg-6 flex-order-1"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="1"><span class="fade-yellow-blue">Button A</span></label></div>
    <div class="col-12 col-lg-6 flex-order-3"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="2"><span class="fade-yellow-blue">Button B</span></label></div>
    <div class="col-12 col-lg-6 flex-order-5"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="3"><span class="fade-yellow-blue">Button C</span></label></div>
    <div class="col-12 col-lg-6 flex-order-7"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="4"><span class="fade-yellow-blue">Button D</span></label></div>
    <div class="col-12 col-lg-6 flex-order-9"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="5"><span class="fade-yellow-blue">Button E</span></label></div>
    <div class="col-12 col-lg-6 flex-order-11"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="6"><span class="fade-yellow-blue">Button F</span></label></div>
    <div class="col-12 col-lg-6 flex-order-13"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="7"><span class="fade-yellow-blue">Button G</span></label></div>
    <div class="col-12 col-lg-6 flex-order-2"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="8"><span class="fade-yellow-blue">Button H</span></label></div>
    <div class="col-12 col-lg-6 flex-order-4"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="9"><span class="fade-yellow-blue">Button I</span></label></div>
    <div class="col-12 col-lg-6 flex-order-6"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="10"><span class="fade-yellow-blue">Button J</span></label></div>
    <div class="col-12 col-lg-6 flex-order-8"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="11"><span class="fade-yellow-blue">Button K</span></label></div>
    <div class="col-12 col-lg-6 flex-order-10"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="12"><span class="fade-yellow-blue">Button L</span></label></div>
    <div class="col-12 col-lg-6 flex-order-12"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="13"><span class="fade-yellow-blue">Button M</span></label></div>
</div>

Здесь вы можете увидеть дополнительное пространство над каждой кнопкой: https://codepen.io/herni_hdez/pen/Erqvpb

Если я добавлю правило "margin-top: -1.5rem", они перейдут кжелаемое положение, но метки перекрываются между флажками: https://codepen.io/herni_hdez/pen/bzXrxN

1 Ответ

0 голосов
/ 23 февраля 2019

Поместите display:none на .boton-check input.

https://codepen.io/jgoncalves/pen/MLNEVG

Другой вариант - настроить то, что у вас на .boton-check input, чтобы включить position: absolute;.

https://codepen.io/jgoncalves/pen/bzXYNa

Отличное объяснение скрывающих элементов: https://allyjs.io/tutorials/hiding-elements.html

...