0

我发现了很多关于并排设置 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>
4

1 回答 1

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%; 
}

演示。

如果您想要每行 5 个项目，width请将50%

于 2013-08-22T18:23:51.490 回答