Почему если Label достаточно большой, он переносится на новую строку под Radio?
Всем привет. Не могу понять, почему при верстке HTML страницы на Bootstrap в форме с radio если label большой и выходит за размер блока (делается в 2 строки и более) перепрыгивает на новую строку, и становится как бы под Радио кнопкой, и остается не кликабельное белое поле рядом с кнопкой радио... Подскажите в чем может быть причина, ниже приведен пример моей верстки....
...
<div class="form-check block_div">
<input class=" radio" type="radio" name="in1" id="in1" value="1">
<label class="form-check-label my_controll" for="in1"> 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.</label>
</div>
...
Ответы (2 шт):
Читаем, видим:
- Ширина равна содержимому плюс значения отступов, полей и границ.
- Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
Выходит, что длинный label переходит на следующую строку и так как занимает всю ширину родительского контейнера + отступы, то текст залезает под радио.
Спасибо за направление... Вроде всё же понятно, но почему то был ступор... решил я это добавив класс во внешний блок, сделав все элементы внутри flex и выровнял их по базовой линии...
.flex-radio{
display: flex;
align-items: baseline;
}<div class="form-check block_div flex-radio">
<input class=" radio" type="radio" name="in1" id="in1" value="1">
<label class="form-check-label my_controll" for="in1"> 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.</label>
</div>Может это и пригодится кому, в частности я уже разобрался почему у меня так криво всё выставлялось... я делал анимацию при наведении, для этого пришлось label задать display: block... в общем добавлением flex стилей всё у меня решилось...