如何更改包含项目符号的无序列表的背景颜色

如何解决如何更改包含项目符号的无序列表的背景颜色

我想为无序列表的背景上色，使子弹也具有该背景色。现在，文本具有背景色，但项目符号似乎漂浮在其左侧。我不想指定list-style-position: inside;，因为我希望文本在项目符号的右边对齐。这是我的代码：

ul {
  /*list-style-position: outside;*/
  list-style-type: square;
}

ul li {
  margin-bottom: 10px;
}

.gray-bg {
  background-color: #F5F5F5;
  padding: 10px;
}

<ul>
  <li class="gray-bg">
    <p>Line 1</p>
  </li>
  <li class="gray-bg">
    <p>Line 2</p>
  </li>
  <li class="gray-bg">
    <p>Line 3</p>
  </li>
  <li class="gray-bg">
    <p>Line 4</p>
  </li>
</ul>

解决方法

您可以使用::before选择器，该选择器会将“假”项目符号放置在背景顶部。另外，如果您想摆脱左侧的空白，可以将margin: 0; padding: 0;添加到ul元素中。

ul {
  /*list-style-position: outside;*/
  list-style-type: square;
}

ul li {
  margin-bottom: 10px;
}

.gray-bg {
  background-color: #F5F5F5;
  padding: 10px;
  list-style: none;
}
.gray-bg p {
  display: inline-block;
  margin-left: 20px;
}

.gray-bg::before {
  content: "\2BC0";
}

<ul>
  <li class="gray-bg">
    <p>Line 1</p>
  </li>

  <li class="gray-bg">
    <p>Line 2</p>
  </li>

  <li class="gray-bg">
    <p>Line 3</p>
  </li>

  <li class="gray-bg">
    <p>Line 4</p>
  </li>
</ul>

,

如果bg是纯背景色，则框阴影可以解决问题。

ul { 
  list-style-type: square;
}

ul li {
  margin-bottom: 10px;
  box-shadow:  -2em 0 #f5f5f5
}

.gray-bg {
  background-color: #F5F5F5;
  padding: 10px;
}
 

<ul>
  <li class="gray-bg">
    <p>Line 1</p>
  </li>
  <li class="gray-bg">
    <p>Line 2</p>
  </li>
  <li class="gray-bg">
    <p>Line 3</p>
  </li>
  <li class="gray-bg">
    <p>Line 4</p>
  </li>
</ul>

如果您需要边框，过滤器可以提供帮助

ul {
  list-style-type: square;
}

ul li {
  margin-bottom: 10px;
  box-shadow: -2em 0 #f5f5f5;
  filter: drop-shadow(2px 0) drop-shadow(-2px 0) drop-shadow( 0 2px) drop-shadow(0 -2px)
}

.gray-bg {
  background-color: #F5F5F5;
  padding: 10px;
}

<ul>
  <li class="gray-bg">
    <p>Line 1</p>
  </li>
  <li class="gray-bg">
    <p>Line 2</p>
  </li>
  <li class="gray-bg">
    <p>Line 3</p>
  </li>
  <li class="gray-bg">
    <p>Line 4</p>
  </li>
</ul>