自定义CSS编号对齐

Question

对于使用CSS格式化的有序列表，此代码出现问题。如果列表文本转到第2行，则第二行不直接对齐/在第一行的底部。它实际上从数字下方开始。我已经包含了代码。

HTML：

<ol class="custom-counter">
<li>Select the given link. Verify that the given building name matches with the building name on the web page you are directed to.</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</li>
<li>This is the sixth item</li>
</ol

CSS：

 #my-counter{

  list-style-type: none;
  margin-left: 0;
  padding-right: 0;
}
  #my-counter li{
    counter-increment: start-counter;
    margin-bottom: 10px;
  }


  #my-counter li::before {
    content: counter(start-counter);
      margin-right: 5px;
      font-size: 80%;
      background-color: #E0E0E0;
      color: black;
      font-weight: bold;
      padding: 3px 8px;
      border-radius: 3px;
  }

以上代码将数字列表呈现如下：

Number list not aligned {
{3}}

Answer 1

您可以使用position: absolute;上的:before和position: relative;上的<li>

＆＃13;

＆＃13;

#my-counter{
  list-style-type: none;
  margin-left: 0;
  padding-right: 0;
}
#my-counter li{
  counter-increment: start-counter;
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
}
#my-counter li::before {
  top: 0;
  left: 0;
  content: counter(start-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: #E0E0E0;
  color: black;
  font-weight: bold;
  position: absolute;
  padding: 3px 8px;
  border-radius: 3px;
}

＆＃13;

<ol id="my-counter">
<li>Select the given link. Verify that the given building name matches with the building name on the web page vVerify that the given building name matches with the building name on the web pag you are directed float: left building name matches with the building name on the web page vVerify that the given building name matches with the building name on the web pag you are directed float: left to.</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</li>
<li>This is the sixth item</li>
</ol>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以使用margin-left in negative：before和padding left for li。查看Demo

#my-counter{

  list-style-type: none;
  margin-left: 0;
  padding-right: 0;
}
  #my-counter li{
    counter-increment: start-counter;
    margin-bottom: 10px;
    padding-left: 30px;
  }


  #my-counter li::before {
    content: counter(start-counter);
      margin-right: 5px;
      font-size: 80%;
      background-color: #E0E0E0;
      color: black;
      font-weight: bold;
      padding: 3px 8px;
      border-radius: 3px;
          margin-left: -30px;
  }

Answer 3

my-counter li ::在给他position:absolute之前，＃my-counter li给他padding-left: 35px;position: relative;

#my-counter{

  list-style-type: none;
  margin-left: 0;
  padding-right: 0;
}
  #my-counter li{
     counter-increment: start-counter;
    margin-bottom: 10px;
    list-style: none;
    padding-left: 35px;
    position: relative;

  }


  #my-counter li::before {
       content: counter(start-counter);
    margin-right: 5px;
    font-size: 80%;
    background-color: #E0E0E0;
    color: black;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
    position: absolute;
    left: 0;
    top: 0;
  }

<ol id="my-counter">
<li>Select the given link. Verify that the given building name matches with the building name on the web page vVerify that the given building name matches with the building name on the web pag you are directed to.</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</li>
<li>This is the sixth item</li>
</ol>