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

Question

我想为无序列表的背景着色，使项目符号也具有该背景色。 现在，文本具有背景颜色，但项目符号似乎漂浮在其左侧。 我不想指定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>

Answer 1

您可以使用::before选择器，它将我们的“假”项目符号定位在背景顶部。 另外，如果你想摆脱左边的间隙，你可以添加margin: 0; padding: 0; 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>

Answer 2

如果 bg 是纯背景色，则 box-shadow 可以解决问题。

 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>