文本，当在新行中时，没有左填充[重复]答案

【问题标题】：Text, when is in new line, has no left padding [duplicate]文本，当在新行中时，没有左填充[重复]
【发布时间】：2022-01-12 14:35:19
【问题描述】：

我有一个简单的问题，但无法解决，这是我的 html 和 css

.listPo {
    list-style: none;
    counter-reset: item;
    padding-left: 0.2em;
}
.listPo>li {
  counter-increment: item;
  margin-bottom: 8px;
  font-size: 15px;
}
.listPo>li:before {
  margin-right: 10px;
  content: counter(item);
  background: #0e4b78;
  color: white;
  width: 1.5em;
  text-align: center;
  display: inline-block;
  padding-left: 1px;
  padding-right: 2px;
}

<ol class="listPo">
   <li>
      <a href="h#">
      gfsdgsdfgsdf
      </a>
      ,Chemica Actaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </li>
   <li>
      <a href="h#">
      gfsdgsdfgsdf
      </a>
      ,Chemica Actaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </li>
</ol>

我想要达到的目的是：

任何人都可以尝试帮助我解决这个问题，我不知道我做错了什么？

【问题讨论】：

标签： html css html-lists

【解决方案1】：

还有更多方法，例如将填充设置为整个 LI 和将 position: absolute 设置为计数器（:before 伪元素）。

.listPo {
    list-style: none;
    counter-reset: item;
    padding-left: 0.2em;
}
.listPo>li {
  counter-increment: item;
  margin-bottom: 8px;
  font-size: 15px;
  padding-left: calc(1.5em + 10px);
  position: relative;
}
.listPo>li:before {
  margin-right: 10px;
  content: counter(item);
  background: #0e4b78;
  color: white;
  width: 1.5em;
  text-align: center;
  display: inline-block;
  padding-left: 1px;
  padding-right: 2px;
  position: absolute;
  top: 0; 
  left: 0;
}

<ol class="listPo">
   <li>
      <a href="h#">
      gfsdgsdfgsdf
      </a>
      ,Chemica Actaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </li>
   <li>
      <a href="h#">
      gfsdgsdfgsdf
      </a>
      ,Chemica Actaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </li>
</ol>

【讨论】：