Html 为<；设置背景色；李>；但不是它的孩子

我想设置一个带有背景颜色的HTML列表。 里面有一些孩子，但我想让孩子们没有背景色（透明）

标题1

副标题A
副标题B

我该怎么做

---

我在JSFIDLE上发布了我的代码：

您必须对span元素应用背景色，才能得到您想要的。如果可能的话，我还鼓励您使用外部或内部css而不是内联css。这是一个有效的例子

HTML

<ul class="item-has-bg">
  <li >
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

---

有两种方法可以解决您的问题：

#1

您可以像这样为li设置display:inline

<ul>
    <li style="background: #fb7171; display:inline;">
        <span>HEADING 1</span>
        <ul>
            <li>sub-heading A</li>
            <li>sub-heading B</li>
        </ul>
    </li>
</ul>

标题1

分标题A
分标题B

#2

或者，您可以将背景设置为span。结果是一样的

<ul>
    <li>
        <span style="background: #fb7171; display:inline-block;">HEADING 1</span>
        <ul>
            <li>sub-heading A</li>
            <li>sub-heading B</li>
        </ul>
    </li>
</ul>

标题1

分标题A
分标题B

注意

在第一种方法中，如果您想充分利用，您可以简单地执行以下操作：

<ul>
    <li>
        <span style="background: #fb7171!important;display:inline-block;width:100%;">HEADING 1</span>
        <ul>
            <li style="background: transparent!important;">sub-heading A</li>
            <li style="background: transparent!important;">sub-heading B</li>
        </ul>
    </li>
</ul>

标题1

副标题A
副标题B

---

请记住，在这种情况下，您应该保持儿童的背景透明属性。

将每个

li

内容（文本）包装在span或div中。 将背景色应用于这些。为了使子项具有不同的颜色，需要替代父项

/*第一级*/
李斯潘{
display:block；/*这使跨度与li一样宽*/
背景色：#fb7171；
}
/*所有子级（多个级别）*/
李斯潘{
显示：块；
背景色：透明；
}

标题1

分标题A
分标题B



标题1

分标题A
分标题B


 
可以考虑一个伪元素（在<代码> Li <代码>或<代码> Studio），它将作为后台，并容易地控制其位置，用上/左/右/下：

li.后跨{
位置：相对位置；
}
李：前{
内容：“；
位置：绝对位置；
排名：0；
底部：-3px；
左：-30px；
右图：-100%；
背景#fb7171；
z指数：-1；
}


标题1

分标题A
分标题B



标题2

分标题A
分标题B


这一个将给出您想要的准确结果

<ul>
    <li>
        <span style="background: #fb7171!important;display:inline-block;width:100%;">HEADING 1</span>
        <ul>
            <li style="background: transparent!important;">sub-heading A</li>
            <li style="background: transparent!important;">sub-heading B</li>
        </ul>
    </li>
</ul>



标题1

副标题A
副标题B



您的最后一个小提琴代码运行得非常顺利。
您只需在span标记中添加“宽度：100%”

<ul>
    <li>
        <span style="background: #fb7171; display:inline-block;width:100%">HEADING 1</span>
        <ul>
            <li>sub-heading A</li>
            <li>sub-heading B</li>
        </ul>
    </li>
</ul>



标题1

分标题A
分标题B




我也在这里发布了代码
 将
背景色
移动到
span
并将其设为块元素，或者改用
div
。@Kelvin Low它们已经是透明的（您可以看到其父对象的背景色）我尝试过，但区域
太小<代码>

填充了整整一行，这正是我想要的。只要

，如何设置

@Mohammadusmam我的背景是透明的。我想让孩子们回到透明但没有运气的地方@TimothyGroote@KelvinLow正如我所说，通过添加

display:block

或将

span

替换为

div

，使其成为块级元素。这是工作，但太短了。我希望它能像单个

一样长。有可能吗？@KelvinLow哪一个？第一种方法还是第二种方法？@KelvinLow您只需设置display:inline block；宽度：100%；在李，这将是充分的结果width@TemaniAfif我没有发现任何错误OP需要他的孩子li是透明的，这就是输出为什么高度20px是硬编码的？如果我增加span content字体大小会怎么样？@NitinDhomse我只是举一个例子，这可能会根据情况而改变，例如我们可以使用
1em
或其他任何东西；）非常感谢@beerwin。我从没想过这是可行的。
<ul>
    <li>
        <span style="background: #fb7171!important;display:inline-block;width:100%;">HEADING 1</span>
        <ul>
            <li style="background: transparent!important;">sub-heading A</li>
            <li style="background: transparent!important;">sub-heading B</li>
        </ul>
    </li>
</ul>

<ul>
    <li>
        <span style="background: #fb7171; display:inline-block;width:100%">HEADING 1</span>
        <ul>
            <li>sub-heading A</li>
            <li>sub-heading B</li>
        </ul>
    </li>
</ul>