Question

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

<ul>
  <li style="background: #fb7171!important;">
    <span>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>

我该怎么做？

我在JSFiddle上发布了我的代码：https://jsfiddle.net/6zvwxva0/

Answer 1

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

/* First level */
ul li span {
  display: block; /*this makes the span as wide as the li*/
  background-color: #fb7171;
}

/* all children (multiple levels) */
ul ul li span {
  display: block;
  background-color: transparent;
}

<ul>
  <li>
    <span>HEADING 1</span>
    <ul>
      <li><span>sub-heading A</span></li>
      <li><span>sub-heading B</span></li>
    </ul>
  </li>
  <li>
    <span>HEADING 1</span>
    <ul>
      <li><span>sub-heading A</span></li>
      <li><span>sub-heading B</span></li>
    </ul>
  </li>
</ul>

Answer 2

您将完美掌握最后的小提琴代码。 https://jsfiddle.net/6zvwxva0/6/ 你只需要添加宽度：100％＆＃39;在span标签中。

<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>

我也在这里发布了代码。 https://jsfiddle.net/0q541cj2/

Answer 3

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

<强>＃1

你可以设置显示：像这样的li内联

<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>

<强>＃2

或者您可以设置跨度的背景。结果将是相同的

<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>

注意

在第一种方法中，如果你想充满你，你可以简单地这样做：

<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>

请记住，在这种情况下，您应该将这些背景透明属性保留在儿童身上。

Answer 4

你可以考虑一个伪元素（在li或span上）作为背景，并轻松控制其位置为top / left / right / bottom：

＆＃13;

li.back span {
  position: relative;
}

li.back span:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -3px;
  left: -30px;
  right: -100%;
  background: #fb7171;
  z-index: -1;
}

＆＃13;

<ul>
  <li class="back">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="back">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 5

这个将根据您的需要给出确切的结果。

<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>

Answer 6

您必须将背景颜色应用于span元素才能获得所需内容。另外，如果可能的话，我鼓励你使用内联css而不是内联css。 Here是一个有效的例子。

<强> 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>

<强> CSS

.item-has-bg > li > span {
  background-color: #fb7171;
  display: block;
}

为<li>设置背景颜色，但不为其子

6 个答案: