使用CSS填充LI的整行

Question

我有这些嵌套ul和li.当我填充背景颜色时,嵌套的li会将缩进的部分留白.我有一些像这样的li从数据库中填充,所以我不能给li中的单个文本留下余量.我怎么能这样做,以便背景填补整行与缩进？

现在它看起来像这样

在此输入图像描述

我想要这样

在此输入图像描述

有什么建议怎么办？提前致谢.我无法更改html标记,因为我将不得不更改大量代码.有没有办法使用此标记执行此操作.这些li来自db查询,所以在这种情况下我没有确切的li数.

Answer 1

默认情况下,<ul>必须padding-left容纳项目符号.

如果你将它添加到你的CSS:

ul {padding-left:0}
ul>li {padding-left:40px}

你应该得到你想要的效果.

编辑:您还需要更正您的HTML:p <ul>只能<li>作为孩子.

+1正确的HTML.@Ace你不能把'ul`放在`ul`里面只有`li`被允许在'ul`中.你需要做的是这个,`<li> <ul>东西就在这里</ ul> </ li>`.祝你好运. (2认同)

Answer 2

最好的办法是使用一种易于数据库管理、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;
}

我不知道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>