Question

我在菜单用法等方面找到了很多关于样式化li元素的例子。我有类似的问题但是里面没有任何元素。试过那些菜单示例，但显然遗漏了一些东西...... <input>项下有<label>和<li>个元素。我想重新分配复选框元素，以便每行有4或5个。

col_100的宽度为857像素。

此代码由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>

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%

设置一长串复选框的样式

1 个答案: