在有边距之前的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;
}

当列表项的文本进入多行时，文本将转到页面的左边缘。我希望它与上面的文字一致。希望下面的图片可以更好地解释这一点。

我尝试在li CSS上添加左边距，但这也会移动数字。

任何帮助表示赞赏！

由于

Answer 1

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

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

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

请看下面的代码段：

＆＃13;

＆＃13;

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

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！