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

Question

我有一个项目符号列表，其中包含图像作为项目符号点，并对其进行编码，如代码片段中所示：

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>

正如您所看到的，每个项目符号副本都没有对齐，第二行从复选标记开始的地方开始。我们可以用什么方法让它与第一行的第一个单词对齐？我可以添加 padding-left 或 margin-left，但想看看是否还有其他方法。

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

Answer 1

如果您添加负边距来抵消您添加的边距，您将获得所需的结果。

（我从网上添加了一张项目符号图像，以便您可以看到列表布局正在按照您的预期工作）

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>

Answer 2

我明白你想要做什么，但是

li::before

不是你改变要点的方式。有了你所拥有的，你所要做的就是在每个

<li>

的前面添加图像，所以它实际上is正确对齐。

要修复它，请完全摆脱该

li::before

风格。您可以使用

<ul>

属性和

list-style

更改

url()

的项目符号。

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');
}

这能解决你的问题吗？