html - 如何使用css使文本与列表中的文本垂直对齐

Question

我正在为我的列表使用支票的背景图像。问题在于，出于某种原因，列表项下一行的文本与其上方的文本不对齐，而是支票图像。我试过使用 list-style-position: outside; 但它似乎不起作用。

这是我的代码:

li {
  list-style: none;
  margin-bottom: 0.5em;
  text-indent: 1.2em;
  background-image: url(https://placehold.it/15x15);
  background-repeat: no-repeat;
  letter-spacing: 1px;
  font-weight: 200;
  font-size: 12px;
  list-style-position: outside;
  line-height: 1.2;
}
.checklist-left {
  width: 50%;
  float: left;
  text-align: left;
}
.checklist-right {
  width: 50%;
  float: right;
  text-align: left;
}

<ul class="checklist-left">
  <li>Improve clarity</li>
  <li>Check formatting</li>
  <li>Improve logical flow</li>
</ul>
<ul class="checklist-right">
  <li>Eliminate irrelevant words</li>
  <li>Verify adherence to stylistic guidelines</li>
</ul>

这是它的样子:

感谢任何帮助。

Answer 1

问题是您使用的 text-indent 只会调整文本的第一行。

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

文本缩进 ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent )

要修复，请对您的 CSS 进行以下修改:

• 从 li
中删除 text-indent: 1.2em;
• 添加 padding-left: 1.2em; 到 li

这会将 padding 应用到 li 的整个左侧，插入内容并允许 background-image 使用空白空间。

li {
  list-style: none;
  margin-bottom: 0.5em;
  padding-left: 1.2em;
  background-image: url(https://placehold.it/15x15);
  background-repeat: no-repeat;
  letter-spacing: 1px;
  font-weight: 200;
  font-size: 12px;
  list-style-position: outside;
  line-height: 1.2;
}
.checklist-left {
  width: 50%;
  float: left;
  text-align: left;
}
.checklist-right {
  width: 50%;
  float: right;
  text-align: left;
}
/*Added to make the issue visible in the snippet*/
.checklist-left, .checklist-right {
  padding: 0;
  width: 30%;
}

<ul class="checklist-left">
  <li>Improve clarity</li>
  <li>Check formatting</li>
  <li>Improve logical flow</li>
</ul>
<ul class="checklist-right">
  <li>Eliminate irrelevant words</li>
  <li>Verify adherence to stylistic guidelines</li>
</ul>

list-style-position 在使用背景图像时不会有任何效果，因为它只会影响实际复选标记的位置。

The list-style-position property specifies the position of the marker box in the principal block box.

列表样式位置 ( https://developer.mozilla.org/en/docs/Web/CSS/list-style-position )