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