Css 在有序列表中包装文本

我已经在我的ol中自定义了数字的外观。现在我不知道如何使多行列表项长时间缩进到第一行的同一点。文本在数字下换行

我对无序列表也有同样的问题，但在CSS中使用此问题已修复：

ul.indentedList li {

    list-style-position: outside;
    margin-left: 1em;

}

但是我不能用定制的订单列表来实现这一点

以下是我的工作内容：

.custom-counter ol{
counter-reset: myCounter;
}

.custom-counter li{
list-style: none;
counter-increment: step-counter;
}

.custom-counter li:before {
content:counter(step-counter);
color: white;
background: #ff5100;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
border-radius: 50%;
}

---

和小提琴：

根据评论反馈更新。我决定使用

flex

，并使它以我认为您需要的方式工作，看看这个

我补充说：

---

我通常会通过绝对定位来实现这一点：在li's的左侧之前，并在li's上添加填充物，以使其具有一致的缩进。我还为li添加了一个最小高度，以确保：before始终有垂直空间

。自定义计数器ol{
计数器复位：myCounter；
}
.海关柜台李{
列表样式：无；
计数器增量：步进计数器；
位置：相对位置；
利润率：20px0；
左侧填充：50px；
最小高度：40px；
}
.海关柜台李：以前{
内容：计数器（步进计数器）；
位置：绝对位置；
左：0；
颜色：白色；
背景#ff5100；
显示：内联块；
文本对齐：居中；
保证金：0；
线高：40px；
宽度：40px；
高度：40px；
边界半径：50%；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯·费利斯（mauris felis）、埃吉特·波苏尔（eget posuere leo congue quis）的名言。毛里斯·莫利斯（Mauris mollis）nec sem ac-Pat。虎口浮雕和肘部浮雕同侧前庭；不只是暂时的自由，而是一种效率
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯·费利斯（mauris felis）、埃吉特·波苏尔（eget posuere leo congue quis）的名言。毛里斯·莫利斯（Mauris mollis）nec sem ac-Pat。虎口浮雕和肘部浮雕同侧前庭；不只是暂时的自由，而是一种效率
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯·费利斯（mauris felis）、埃吉特·波苏尔（eget posuere leo congue quis）的名言。毛里斯·莫利斯（Mauris mollis）nec sem ac-Pat。虎口浮雕和肘部浮雕同侧前庭；不只是暂时的自由，而是一种效率
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯·费利斯（mauris felis）、埃吉特·波苏尔（eget posuere leo congue quis）的名言。毛里斯·莫利斯（Mauris mollis）nec sem ac-Pat。虎口浮雕和肘部浮雕同侧前庭；不只是暂时的自由，而是一种效率

.custom-counter li{
  display: flex; 
}
.custom-counter li:before {
  flex: 0 0 40px;
}
// To remove the added margin on top of the paragraph.
.custom-counter li p {
  margin-top: 0px;
}