Как выровнять чекбоксы?

Question

[Mesuti]

Привет!
Чекбоксы генерируются в CMS. Поэтому могу настраивать только массово кучу.
Как можно нормально выровнять чекбоксы и текст возле них? Чтобы были более обтекаемыми и складывались?
Пробовал тексту указывать и margin и padding, все равно друг на друге стоят.
Песочница jsFiddle

Было так:


Указал родителю column-count:7. Все стало ровнее, но слова в куче:


Указываю словам white-space: pre, слова стали прямо, но наезжают друг на друга:


а на адаптивность вообще страшно смотреть:

Comments

[Dinwid]

что-то похожее?
https://jsfiddle.net/8fztmdo9/71/

Answer 1

[Владимир Проскурин]

А если обернуть чекбокс и текст в один label, и поставить ему
display: inline-block;
Ну и дополнительно можно задать минимальную ширину
min-width: 200px;
UPD: А, еще проще. Есть же свойство column-width, задаете его равным ширине блока поделенной на количество колонок. https://jsfiddle.net/9pq7Lut2/
Но смотрите, чтобы строка была блочным элементом, как в моем примере. Вместо label лучше поставить div

Comments

[Mesuti]

У Вас пример работает только с одинаковыми длинами текста.
Если текст длиннее то он накладывается на следующий
https://jsfiddle.net/Mesuti/9pq7Lut2/2/

[Mesuti]

Спасибо за участие!
column-width хорошее решение.
Только оно фиксированное и нужно выравнивать все с помощью медиа-запросов.
А есть возможность сделать эти label обтекаемыми? чтобы при уменьшении экрана они самостоятельно складывались

[Владимир Проскурин]

Александр Сорокин, можно к леблу добавить white-space: pre-line; https://jsfiddle.net/9pq7Lut2/4/ но там чекбокс может легко потерять свою строчку на следующую колонку, такова работа columns. Может вам стоит использовать инструменты созданные для этой задачи, например https://jsfiddle.net/cjfsLvmq/

[Владимир Проскурин]

ссылка первая не обновилась https://jsfiddle.net/8sexqzn0/

[Владимир Проскурин]

Александр Сорокин, вот так можно адаптировать флексы https://jsfiddle.net/q7vxsfdn/ задаете минимальную ширину, и если они до нее доходят, последний переходит на следующую строку. Ну или можно через медиа задавать кол-во колонок путем установки процентов в flex-basis равным 100/кол-во

[Mesuti]

Спасибо за решение!
Вы гениальный человек!