造型复选框的长列表

我发现了很多关于样式li元素的菜单用法等的例子。我有类似的问题，但没有任何元素在里面。试过这些菜单的例子，但显然缺少一些东西... 有<input>和<label>元素在<li>项目下。我想重新分配复选框元素，以便每行都有4或5个元素。造型复选框的长列表

col_100的宽度为857px。

此代码是由Telerik的，这是我不能修改，只可以输出HTML添加一些风格自动生成:( 你能给我领先地位？

<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>

来源

2013-08-22 cevizmx

我不知道这是什么你的意思，但你可以显示li为inline-block的

这样的：。

.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%

来源

2013-08-22 18:23:51 LinkinTED

谢谢配合！ – cevizmx

造型复选框的长列表

回答

相关问题