CSS边距

Question

我正在使用的代码从这里

之前有序列表样式::样式我的有序列表http://codepen.io/sawmac/pen/txBhK

HTML

<ol class="custom-counter"> 
<li>This is the first item</li> 
<li>This is the second item</li> 
<li>This is the third item</li> 
<li>This is the fourth item</li> 
<li>This is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item</li> 
<li>This is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item </li> 
</ol> 

CSS

body { 
    font-size: 1.2em; 
    font-family: "Helvetica Neue", Helvetica, sans-serif; 
    margin: 50px; 
} 

.custom-counter { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

.custom-counter li { 
    counter-increment: step-counter; 
    margin-bottom: 10px; 
} 

.custom-counter li::before { 
    content: counter(step-counter); 
    margin-right: 5px; 
    font-size: 80%; 
    background-color: rgb(0,200,200); 
    color: white; 
    font-weight: bold; 
    padding: 3px 8px; 
    border-radius: 3px; 
} 

当文本的列表项将进入多行，文本将进入页面的左侧边缘。我希望它符合上面的文字。希望下面的图片能更好地解释这一点。

我已经尝试添加一个左边距到李CSS，但移动号码以及。

任何帮助表示赞赏！

感谢

Answer 1

上li和li:before使用的定位。像：

li { 
    position: relative; 
    padding-left: 35px; 
} 

li:before { 
    position: absolute; 
    left: -5px; 
} 

看一看下面的代码片段：

body { 
 
    font-size: 1.2em; 
 
    font-family: "Helvetica Neue", Helvetica, sans-serif; 
 
    margin: 50px; 
 
} 
 

 
.custom-counter { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.custom-counter li { 
 
    counter-increment: step-counter; 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
    padding-left: 35px; 
 
} 
 

 
.custom-counter li::before { 
 
    position: absolute; 
 
    left: -5px; 
 
    content: counter(step-counter); 
 
    margin-right: 5px; 
 
    font-size: 80%; 
 
    background-color: rgb(0,200,200); 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: 3px 8px; 
 
    border-radius: 3px; 
 
}

<ol class="custom-counter"> 
 
    <li>This is the first item</li> 
 
    <li>This is the second item</li> 
 
    <li>This is the third item Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rem quia et quibusdam dolore impedit porro, velit voluptatibus odit? Rem doloremque quos, officia aut nulla distinctio itaque quisquam excepturi rerum.</li> 
 
    <li>This is the fourth item</li> 
 
    <li>This is the fifth item</li> 
 
    <li>This is the sixth item</li> 
 
    <li>This is the sixth item</li> 
 
    <li>This is the sixth item</li> 
 
    <li>This is the sixth item</li> 
 
</ol

希望这有助于！