Укладка длинного списка флажков

Question

Я нашел много примеров для стилизации элементов li бок о бок для использования в меню и т. Д. У меня есть аналогичная проблема, но у меня нет элементов внутри них. Пробовал эти примеры меню, но явно чего-то не хватает ... Есть <input> и <label> элементов под <li> элементов. Я хочу перераспределить элементы флажка, чтобы каждая строка имела 4 или 5 из них.

Ширина col_100 составляет 857px.

Этот код автоматически генерируется Telerik, которые я не могу изменить, просто добавить некоторый стиль на выходе HTML :( Можете ли вы дать мне Headstart?

<div class="col_100"> 
    <ul id="rchklistservices" class="visitsTbl"> 
     <li><input id="rchklistservices_0" type="checkbox" name="rchklistservices$0" checked="checked" value="1"><label for="rchklistservices_0">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_1" type="checkbox" name="rchklistservices$1" value="2"><label for="rchklistservices_1">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_2" type="checkbox" name="rchklistservices$2" value="3"><label for="rchklistservices_2">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_3" type="checkbox" name="rchklistservices$3" value="4"><label for="rchklistservices_3">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_4" type="checkbox" name="rchklistservices$4" checked="checked" value="11"><label for="rchklistservices_4">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_5" type="checkbox" name="rchklistservices$5" value="12"><label for="rchklistservices_5">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_6" type="checkbox" name="rchklistservices$6" value="13"><label for="rchklistservices_6">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_7" type="checkbox" name="rchklistservices$7" value="14"><label for="rchklistservices_7">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_8" type="checkbox" name="rchklistservices$8" value="15"><label for="rchklistservices_8">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_9" type="checkbox" name="rchklistservices$9" checked="checked" value="16"><label for="rchklistservices_9">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_10" type="checkbox" name="rchklistservices$10" checked="checked" value="17"><label for="rchklistservices_10">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_11" type="checkbox" name="rchklistservices$11" value="18"><label for="rchklistservices_11">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_12" type="checkbox" name="rchklistservices$12" value="19"><label for="rchklistservices_12">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_13" type="checkbox" name="rchklistservices$13" value="20"><label for="rchklistservices_13">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_14" type="checkbox" name="rchklistservices$14" value="21"><label for="rchklistservices_14">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_15" type="checkbox" name="rchklistservices$15" value="22"><label for="rchklistservices_15">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_16" type="checkbox" name="rchklistservices$16" value="23"><label for="rchklistservices_16">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_17" type="checkbox" name="rchklistservices$17" value="24"><label for="rchklistservices_17">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_18" type="checkbox" name="rchklistservices$18" value="25"><label for="rchklistservices_18">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_19" type="checkbox" name="rchklistservices$19" value="26"><label for="rchklistservices_19">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_20" type="checkbox" name="rchklistservices$20" value="27"><label for="rchklistservices_20">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_21" type="checkbox" name="rchklistservices$21" checked="checked" value="28"><label for="rchklistservices_21">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_22" type="checkbox" name="rchklistservices$22" value="29"><label for="rchklistservices_22">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_23" type="checkbox" name="rchklistservices$23" value="31"><label for="rchklistservices_23">Lorem Ipsum</label></li> 
     <li><input id="rchklistservices_24" type="checkbox" name="rchklistservices$24" value="32"><label for="rchklistservices_24">Lorem Ipsum</label></li> 

</ul> 
</div> 

Answer 1

Я не знаю, если это то, что вы имеете в виду, но вы могли бы отобразить li как встроенный блок

как это:..

.col_100 { 
    width: 857px; 
} 
.col_100 ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.col_100 ul li { 
    display: inline-block; 
    margin-right: -4px; 
    width: 25%; 
} 

DEMO

Если вы хотите 5 пунктов в каждой строке, изменить width к 50%