当屏幕尺寸变小时如何确保自定义列表项呈现在顶部

问题描述

我创建了一个带有自定义项目符号的无序列表，它似乎有一些不需要的行为。

当屏幕尺寸小于 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>