如何更改包含項目符號的無序列表的背景顏色

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>