我有以下代码:
.page-content ul {
list-style: none;
margin-bottom: 15px;
line-height: 34px;
color: rgba(204, 204, 204, 1);
}
.page-content ul {
list-style: none;
margin-bottom: 15px;
line-height: 34px;
color: rgba(204, 204, 204, 1);
}
.page-content li:before {
content: "• ";
color: green;
margin-right: 10px;
line-height: 34px;
list-style-position: inside;
}
<div class="page-content">
<ul>
<li>short bullet</li>
<li>short bullet</li>
<li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
</ul>
</div>
如您所见,如果列表项继续进行到第二行,它将丢失li
padding
/ margin
。
有什么方法可以让后续的行与第一行匹配?
您可以添加margin-left:-20px
到li:before
.page-content ul {
list-style: none;
margin-bottom: 15px;
line-height: 34px;
color: rgba(204, 204, 204, 1);
}
.page-content ul {
list-style: none;
margin-bottom: 15px;
line-height: 34px;
color: rgba(204, 204, 204, 1);
}
.page-content li:before {
content: "• ";
color: green;
margin-right: 10px;
margin-left:-20px;
line-height: 34px;
list-style-position:inside;
}
<div class="page-content">
<ul>
<li>short bullet</li>
<li>short bullet</li>
<li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
</ul>
</div>
另一个解决方案可能是text-indent:-1em
在li
.page-content ul {
list-style: none;
margin-bottom: 15px;
line-height: 34px;
color: rgba(204, 204, 204, 1);
}
.page-content ul {
list-style: none;
margin-bottom: 15px;
line-height: 34px;
color: rgba(204, 204, 204, 1);
}
.page-content li {
text-indent: -1em
}
.page-content li:before {
content: "• ";
color: green;
margin-right: 10px;
line-height: 34px;
list-style-position: inside;
}
<div class="page-content">
<ul>
<li>short bullet</li>
<li>short bullet</li>
<li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
</ul>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句