Question

我试图创建一个项目符号列表，其中标签的左边距（项目符号）的背景颜色具有背景颜色。我在网上找到解决方案是徒劳的，只是想知道是否有任何CSS专家可以提出解决方案？

Answer 1

这是对的吗？此代码在li标签左侧显示红色背景颜色

<style>
    ul{background-color: red;}
    li{margin-left: 10px; background-color:white;}
</style>


<ul>
    <li> aaaaa </li>
    <li> bbbb <li>
</ul>

Answer 2

如果您想使用透明背景（您可以使用其他两个建议的答案），另一种方法是使用伪元素。

＆＃13;

ul {
  padding-left: 20px;
}
li {
  position: relative;
}
li:before {
  background: blue;
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 20px;
  margin-left: -20px;
  z-index: -1;
}

＆＃13;

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

＆＃13;

Answer 3

HTML：

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

CSS：

ul{background:coral}
li{background:green}

jsFiddle

<li>标签</li>的子弹部分的背景颜色

3 个答案: