自定义计数器有序列表对齐问题[重复]答案

【问题标题】：Customized counter ordered list alignment issue [duplicate]自定义计数器有序列表对齐问题[重复]
【发布时间】：2021-02-04 05:30:30
【问题描述】：

我有一个简单的有序列表。我使用 counter-reset 属性来更改数字的样式。但问题是当容器 (.list) 宽度较小时，列表不会像有序列表那样直接对齐。

.list{
  border: 1px solid black;
  width: 40%;
  box-sizing: border-box;
}
ol{
  list-style: none;
  counter-reset: csscounter;
  padding-left: 0.5rem;
}

li{
    counter-increment:csscounter;
    margin-bottom: 0.25rem;
}
li:before{
  content: counter(csscounter);
  background: gray;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  display: inline-block;
  line-height: 1.5rem;
  text-align: center;
  color: white;
  margin-right: 0.5rem;
}

<div class='list'>
<ol>
  <li>
    Enter your mobile number to view  your book collection
  </li>
  <li>
    Select the books that you want to add to your collection
  </li>
  <li>
    Confirm and Submit
  </li>
</ol>
</div>

如果我删除 <ol> 的 css 属性，列表将正确呈现并且不会出现对齐问题。

.list{
  border: 1px solid black;
  width: 40%;
  box-sizing: border-box;
}

<div class='list'>
<ol>
  <li>
    Enter your mobile number to view  your book collection
  </li>
  <li>
    Select the books that you want to add to your collection
  </li>
  <li>
    Confirm and Submit
  </li>
</ol>
</div>

【问题讨论】：

标签： css html-lists text-align

【解决方案1】：

<ul> 有不同的填充。

问题是您引入了 ::before 伪元素。您必须重新设计内边距和边距。

.list {
  border: 1px solid black;
  width: 40%;
  box-sizing: border-box;
}

ol {
  list-style: none;
  counter-reset: csscounter;
  padding-left: 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

li {
  counter-increment: csscounter;
  margin-bottom: 0.25rem;
}

li:before {
  content: counter(csscounter);
  background: gray;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  display: inline-block;
  line-height: 1.5rem;
  text-align: center;
  color: white;
  margin-left: -1.75rem;
}

<div class="list">
  <ol>
    <li>
      Enter your mobile number to view your book collection
    </li>
    <li>
      Select the books that you want to add to your collection
    </li>
    <li>
      Confirm and Submit
    </li>
  </ol>
</div>

【讨论】：

只是一个想法：如果你将width: 2rem 和margin-left: 2rem 设置为li::before（与ol 的padding-left: 2rem 相同，你不会得到一个更好的居中项目而不是尝试使用width: 1.5rem 和margin-left: -1.75rem 将其向左拉到伪中心？
“问题”（这实际上不是问题）是您使用的是伪元素。浏览器理解该元素的方式与您拥有角色的方式相同。负边距实际上将整条线向右推。这里看看 - link

【解决方案2】：

已编辑以避免重复答案。

您还可以使用 ,::marker、padding、list-style-position 和 radial-gradient 背景：

可能的例子

.list {
  border: 1px solid black;
  width: 250px;
  box-sizing: border-box;
}
::marker{color:#ddd;}
li {
  list-style-position: inside;
  text-indent: -1.5em;
  padding: 0.3em 0 0.2em 2em;
  background: radial-gradient(
    circle at 0.8em 0.9em,
    gray 0.6em,
    tomato,
    transparent 0.75em
  );
}

<div class='list'>
<ol>
  <li>
    Enter your mobile number to view  your book collection
  </li>
  <li>
    Select the books that you want to add to your collection
  </li>
  <li>
    Confirm and Submit
  </li> 
</ol>
</div>

【讨论】：