1
我正在使用的代码从这里
之前有序列表样式::样式我的有序列表http://codepen.io/sawmac/pen/txBhKCSS边距
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,但移动号码以及。
任何帮助表示赞赏!
感谢