如何使用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只会调整第一行文字。

  

text-indent属性指定在元素的文本内容的第一行开头之前应留多少水平空间。

text-indent（https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent）

要修复，请对CSS进行以下修改：

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

这会将padding应用于li的整个左侧，推送内容并允许background-image使用空格。

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用背景图片时，

list-style-position无效，因为它只会影响实际复选标记的位置。

  

list-style-position属性指定主体块框中标记框的位置。

list-style-position（https://developer.mozilla.org/en/docs/Web/CSS/list-style-position）

Answer 2

这是另一种解决方案，而不是list-style-type，您可以使用:before伪元素和content: '✔';

＆＃13;

＆＃13;

.lists {
  background: #154B99;
  display: flex;
  color: white;
  width: 70%;
  margin: 0 auto;
  flex-wrap: wrap;
}

ul {
  flex: 1;
  list-style-type: none;
}

li {
  position: relative;
  letter-spacing: 1px;
  padding-left: 10px;
}

li:before {
   content: '✔';
   position: absolute;
   left: 0;
   top: 0;
   font-size: 12px;
   transform: translate(-100%, 0);
   color: white;
}

＆＃13;

<div class="lists">
  <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>
</div>

＆＃13;

＆＃13;

＆＃13;

您还可以将li和:before垂直对齐transform: translate(-100%, -50%);

＆＃13;

＆＃13;

.lists {
  background: #154B99;
  display: flex;
  color: white;
  width: 70%;
  margin: 0 auto;
  flex-wrap: wrap;
}

ul {
  flex: 1;
  list-style-type: none;
}

li {
  position: relative;
  letter-spacing: 1px;
  padding-left: 10px;
}

li:before {
   content: '✔';
   position: absolute;
   left: 0;
   top: 50%;
   font-size: 12px;
   transform: translate(-100%, -50%);
   color: white;
}

＆＃13;

<div class="lists">
  <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>
</div>

＆＃13;

＆＃13;

＆＃13;