如何解决当屏幕尺寸变小时如何确保自定义列表项呈现在顶部
我创建了一个带有自定义项目符号的无序列表,它似乎有一些不需要的行为。
当屏幕尺寸小于 364px 时,LI 文本呈现为两行。同时,自定义项目符号呈现到第二行而不是第一行。
如何在不改变其他屏幕尺寸的行为的情况下更改此设置?
非常感谢!
#list {
padding: 0 10px 0 0;
}
#list ul {
list-style: none;
padding-left: 0px;
}
#list ul li {
padding: 0px 0px 10px 40px;
background: url('https://via.placeholder.com/20') no-repeat;
background-position: bottom 12px left 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="list">
<ul>
<li><strong>Gratis</strong> omgevingsvergunning check</li>
<li>Bezoek op locatie</li>
<li>3D impressie</li>
<li>Projectbegeleiding</li>
<li>Bouwvergunningen</li>
</ul>
</div>
解决方法
问题似乎与背景位置有关,该位置设置为相对于 li
元素的底部。如果您像这样设置背景位置,它应该可以解决问题:
background-position: top 12px left 10px;
#list {
padding: 0 10px 0 0;
}
#list ul {
list-style: none;
padding-left: 0px;
}
#list ul li {
padding: 0px 0px 10px 40px;
background: url('https://via.placeholder.com/20') no-repeat;
background-position: top 12px left 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="list">
<ul>
<li><strong>Gratis</strong> omgevingsvergunning check</li>
<li>Bezoek op locatie</li>
<li>3D impressie</li>
<li>Projectbegeleiding</li>
<li>Bouwvergunningen</li>
</ul>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。