html – 使用CSS填写LI的整行

前端之家收集整理的这篇文章主要介绍了html – 使用CSS填写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

原文链接:https://www.f2er.com/html/232995.html

猜你在找的HTML相关文章