Найти правильное решение иногда бывает весьма не всегда просто, и когда решение все-таки приходит после долгих поисков, возникают мысли о том, что задача, которая казалась не простой, на самом деле проще некуда. В некоторых формах на сайте иногда нужно сделать список из чекбоксов. Но как вы знаете в стандартном html нет такого элемента формы, которые представлял из себя список из чекбоксов, с возможностью прокрутки. Оказалось, что можно обойтись и без него в принципе.
Пример весьма прост для понимания, поэтому сразу смотрим код:
<div style="width:200px; height:100px; overflow:auto; border:solid 1px #C3E4FE;"> <input type="checkbox" />Toyota <input type="checkbox" />Mercedes-Benz <input type="checkbox" />Volkswagen <input type="checkbox" />Mitsubishi <input type="checkbox" />Audi <input type="checkbox" />Nissan <input type="checkbox" />BMW <input type="checkbox" />Lexus </div>
Группа чекбоксов заключены между в тег div. Для этого тега в CSS задается фиксированный размер, кроме того задается параметр overflow:auto, который собственно и включает полосу прокрутки в случае если установленных размеров блока не достаточно для показа содержимого, в нашем случае это чекбоксы. Таким образом, визуально это выглядит как список чекбоксов с прокруткой, что и требовалось получить.
Результат:
Подобным образом в блоке можно разместить любые элементы формы, и не только. Это удобно тем, что можно размещать данные, которые хотелось бы не растягивать на всё пространство на сайте, а уместить в отведенном для него месте, с возможностью скроллинга.
Работает если только после каждого названия указать тег br
Вот как в примере у автора код работает
Toyota
Mercedes-Benz
Volkswagen
Mitsubishi
Audi
Nissan
BMW
Lexus