html – 使用CSS填写LI的整行

发布时间：2020-12-14 21:37:38 所属栏目：资源来源：网络整理

导读：我有这些嵌套的ul和li。当我填充背景颜色时，嵌套的li留下缩进的部分白色。我有一些这样的李，从数据库填充，所以我不能给留给李的单个文本的余地。我如何做到这一点，使背景与缩进一起填满整个行？现在看起来像这样我想要这样有什么建议怎么办？提前致谢

我有这些嵌套的ul和li。当我填充背景颜色时，嵌套的li留下缩进的部分白色。我有一些这样的李，从数据库填充，所以我不能给留给李的单个文本的余地。我如何做到这一点，使背景与缩进一起填满整个行？

现在看起来像这样

我想要这样

有什么建议怎么办？提前致谢。我不能更改html标记，因为我必须改变很多代码。有没有办法使用这个标记。这些li来自db查询，所以在这种情况下我没有确切的li数。

演示http://jsbin.com/uReBEVe/1/

最好的办法是使用一种可以方便数据库管理，html和样式(CSS)的结构。

HTML：

<body>
<ul class="main">
    <li>1.</li>
    <li><ul>2</ul></li>
    <li><ul><li><ul>3.</ul></li></ul></li>
</ul>
</body>

CSS：

.main{
    position:relative;
    right:40px;
}
li{
    list-style:none;
    background:red;
    margin-top:1px;
}

Fiddle 1.

我不知道如果ul不包含li是有效的或无效的。如果它的无效，那么你可以使用：

<body>
<ul class="main">
    <li>1.</li>
    <li><ul><li>2</li></ul></li>
    <li><ul><li><ul><li>3.</li></ul></li></ul></li>
</ul>
</body>

Fiddle 2

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!