定制的计数器有序列表对齐问题

问题描述

我有一个简单的有序列表。我使用了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>

解决方法

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

,

已编辑以避免重复的答案。

您还可以使用，::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>