Question

我已经在我的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%;
}

小提琴：https://jsfiddle.net/aLkvwu84/1/

Answer 1

根据评论反馈进行了更新。我决定使用flex并按照我认为您正在寻找的方式使其工作，看一看fiddle

这是我添加的内容：

.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;
}

Answer 2

我通常会通过绝对定位来实现这一点：在li的左边，然后在li的左边添加填充以给它们一致的缩进。我还为li添加了一个最小高度，以确保始终存在垂直空间：之前

.custom-counter ol{
counter-reset: myCounter;

}

.custom-counter li{
list-style: none;
counter-increment: step-counter;
position: relative;
margin: 20px 0;
padding-left: 50px;
min-height: 40px;
}

.custom-counter li:before {
content:counter(step-counter);
position: absolute;
left:0;
 
color: white;
background: #ff5100;
display: inline-block;
text-align: center;
margin: 0;
line-height: 40px;
width: 40px;
height: 40px;
border-radius: 50%;
}

<ol class="custom-counter">
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum mauris felis, eget posuere leo congue quis. Mauris mollis nec sem ac volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tempor libero a purus congue, efficitur aliquam erat tincidunt.</li>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum mauris felis, eget posuere leo congue quis. Mauris mollis nec sem ac volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tempor libero a purus congue, efficitur aliquam erat tincidunt.</li>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum mauris felis, eget posuere leo congue quis. Mauris mollis nec sem ac volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tempor libero a purus congue, efficitur aliquam erat tincidunt.</li>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum mauris felis, eget posuere leo congue quis. Mauris mollis nec sem ac volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tempor libero a purus congue, efficitur aliquam erat tincidunt. </li>
</ol>

在有序列表中包装文本

2 个答案:

这是我添加的内容：