设置溢出和文本溢出属性会使li隐藏项目符号。我试过将子弹“放进去”,但它仍然没有显示出子弹。另外,我希望将其放在“外面”
ul.hbox_poplist {
list-style: circle url('/img/bpt_clear.png');
}
ul.hbox_poplist li {
margin: 0 0 8px;
max-height:32px;
text-overflow: ellipsis;
overflow-y: hidden;
}
有人知道对此有任何解决方案吗?
与在自定义项目符号中使用列表样式图像相比,在浏览器中使用CSS背景更加可靠。单独控制列表图像的位置非常困难。
类似:
.bullets {
background-image:url(/img/bpt_clear.png);
background-repeat:no-repeat;
padding-left:30px;
margin-left:-30px;
}
我很早以前就记得这个问题。是的,最好遵循@Diodeus的建议,但是将padding-left
添加到ul
可以奇迹般地解决了我几次的问题。
摆脱溢出y:隐藏;并为ul设置左填充。如果列表ist显示为“ outside”,则需要此选项。尝试以下操作:
ul.hbox_poplist {
list-style: circle url('/img/bpt_clear.png');
padding-left: 20px;
}
ul.hbox_poplist li {
margin: 0 0 8px;
max-height:32px;
text-overflow: ellipsis;
}
您可以尝试list-style-position: inside;
修复它。请检查以下代码段-如果您尝试使用overfow: hidden
而不使用list-style-position: inside
,则会隐藏图像:
ul.checklist li {
list-style-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTEgOCI+ICAgIDxwYXRoIGZpbGw9IiNGMTgwMTkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMTg0IDBMMy45MiA1LjM2OCAxLjI1NiAyLjc4MiAwIDQuMDgyIDMuOTUxIDcuOTJsNi41Mi02LjY1eiIvPjwvc3ZnPg==);
overflow: hidden;
list-style-position: inside;
}
<ul class="checklist">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>