Styling a long list of checkboxes
I found lots of example on styling li elements side by side for menu
usages etc. I have a similar issue but do not have any elements inside
them. Tried those menu examples but obviously missing something... There
are <input> and a <label> elements under <li> items. I want to
redistribute the checkbox elements so that every line has 4 or 5 of them.
The width of the col_100 is 857px.
This code is auto generated by telerik, which I cannot modify, just can
add some style on output html:( Can you give me 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>
No comments:
Post a Comment