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

希望這有助於！