自定义计数器有序列表对齐问题

Question

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

Answer 1

已编辑以避免重复回答。

你也可以使用 ,::marker, padding, list-style-position and a 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>

Answer 2

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

自定义计数器有序列表对齐问题

Customized counter ordered list alignment issue

css

text-align

html-lists