如何对齐列出的项目符号文本？-解网

问：

我有一个以图像为项目符号的项目符号列表，并按代码片段所示对其进行编码：

li::before {
  content: "";
  display: inline-block;
  height: 15px;
  width: 15px;
  background-size: contain;
  background-image: url('https://adp-com-prod.es.ad.adp.com/-/media/apps/wfn/images/rs_email_checklisticon-bullet.png?rev=f7aed74…&hash=2EB10B8B4C4FCB24BC37B1E501219BBB');
  background-repeat: no-repeat;
  margin-right: 7px;
  background-position: center center;
  vertical-align: middle;
}
ul {
  padding-left: 0;
  list-style: none;
}

       <ul class="voe-list">
                <li>
                  <strong>Simplicity.</strong> this is bullet number one with a longer sentence so it goes on the second line. Stay tuned for bullet number 2.
                </li>
                <li>
                  <strong>Compliance.</strong>this is bullet number one with a longer sentence so it goes on the second line.Stay tuned for bullet number 3. 
                </li>
                <li>
                  <strong>Flexibility.</strong>this is bullet number one with a longer sentence so it goes on the second line.Stay tuned for bullet number 4.
                </li>
              </ul>

如您所见，每个项目符号副本都没有对齐，第二行从复选标记开始的地方开始。我们有什么办法让它与第一行的第一个单词对齐吗？我可以添加左边距或左边距，但想看看是否有其他方法。

在默认的无序列表中，它确实对齐，因为列表样式位于标记中（请参见屏幕截图）

CSS HTML 列表

li::before {
  content: "";
  display: inline-block;
  height: 15px;
  width: 15px;
  background-size: contain;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAbFBMVEX///8AAAD4+PjV1dW8vLyrq6tJSUkxMTGMjIyCgoLf39+2traioqKJiYnw8PCurq4WFhZsbGyZmZnNzc1VVVXp6el0dHQ3NzdOTk5iYmLy8vIhISHIyMjj4+MZGRk+Pj4LCwspKSlaWlqVlZXFEyvtAAADlElEQVR4nO3diVrqMBAF4AaVRXBBAcENi+//jrfwXdHK0qSZ5EzH8z9BzgeFmTRLURARERERERERERERERERERERERFRp8zHw1W/v1wNx3P0UFLoTQbu29Okhx6QsN6N++3GVMbLg3xbV+hhyVkcDejc4BE9MiH9EwErGxO/OevTAbePI3p48WZnA1bG6BFGGjYFrP46LtCDjHHRHLAyvUWPs70nr4TOfaIH2tbYM6BzH5fosbYzaI62179Gj7YFv6dwb9G9Qu6wGm0wQY841EtoQle+oscc5DY4YGX5hh52gMDH8MuoO4/j8abJQ2f6qru2CV3Zkb6qfULnVp3oq1p/S3eG6OF7aPlLs6e/r2r1b/HTWn1fdR8b0U2f0RnOG0UndO4BHeKsR4GE7l51XxX/Nd3S3FddiSSs+iq9j6PMh+gU91UxZU3di9a+KmQeo4HSvupVLqHWvurMW4sWNPZV16IJVfZVU9mICvuquXBChX2VRHX6i7K+qiefUFtf9ZAgorK+Sqx2q9HUV/m/ggryrqivEqzdavT0VaK1W42avmqZLKKWvkq4dqtR0ldJ1241Mw19lXztVqOhrwp+HxwI31elqN1q8OsAk9RuNSv0P0ea2q0GXOQkqt1qwEsdywwRF9CE6Wq3H0bQiI1rTSVA+/+Utds36ExV0trtywaZMHHt9h/0rz/LhzhDJoxdnuEH+iSGL1dsATpHlWB6+NAamTBH6eYcslt8y5IQOQUXvU7KC7LHSN4I79wBExYfORIipzTsf4b2n0P7v6Vx64Z9If8P7dc0ZY6EyLrUfpd/auO6KGR/+JwjILTHz/IRIudp8jyFyG3TmxwBkfOlWSZpoHPevlvXY0DfW+Qo2LDvnjJMs2HfH06S5wO/A7b/Ht/jkJMo8LUYiXt7BetpktZrGtZE2V/XlvD9to61iSJbLY/Sch6K+TXC9td5vycJqGitfpJ6TdN+C/t7ZhKsndW178n+3jXz+w/t7yE1vw/Y/l5u8/vx7Z+pILbyQkePdMj+2Sbmz6exf8aQ/XOizJ/1Zf+8Nvtn7tk/N9H+2Zf2zy+1fwat/XOE7Z8FXZTB+bT2SKfYP5Pd/rn69u9GCPi/6Or9FvbvKPkD98zYvyvIY40CdBeWCPN3dv2Be9dOr4fqSo/kwfz9h0XRO/xJtXWHZWH/HtKd7V2yS7t3yRIRERERERERERERERERERERERFRiH8bizuFfRy8ewAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  margin-right: 7px;
  margin-left: -25px;
  background-position: center center;
  vertical-align: middle;
}
ul {
  padding-left: 0;
  list-style: none;
  margin-left: 25px;
}

<ul class="voe-list">
                <li>
                  <strong>Simplicity.</strong> this is bullet number one with a longer sentence so it goes on the second line. Stay tuned for bullet number 2.
                </li>
                <li>
                  <strong>Compliance.</strong>this is bullet number one with a longer sentence so it goes on the second line.Stay tuned for bullet number 3. 
                </li>
                <li>
                  <strong>Flexibility.</strong>this is bullet number one with a longer sentence so it goes on the second line.Stay tuned for bullet number 4.
                </li>
              </ul>

1赞 Nkemdi Anyiam 10/24/2023 #2

我理解你想做什么，但不是你如何改变要点。有了你所拥有的，你所要做的就是在每个的前面添加图像，所以它实际上是正确对齐的。li::before<li>

要修复它，请完全摆脱这种风格。您可以使用属性和更改的项目符号。li::before<ul>list-styleurl()

ul {
  /* padding-left: 0; */
  /* list-style: none; */
  list-style: url('https://adp-com-prod.es.ad.adp.com/-/media/apps/wfn/images/rs_email_checklisticon-bullet.png?rev=f7aed74…&hash=2EB10B8B4C4FCB24BC37B1E501219BBB');
}

这能解决您的问题吗？

上一个：带有换行文本的 <li> 标签导致其父 div 的宽度扩大？

下一个：使用 thymeleaf 循环的有序列表未连接

如何对齐列出的项目符号文本？

How to align listed bullet point text?

评论