カスタムCSS番号の整列

Question

CSSでフォーマットされた順序付きリストのこのコードに問題がありました。リストのテキストが2行目に行くと、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; 
    } 

上記のコードは次のように番号リストをレンダリング：

あなたはに position: absolute;を使用することができます

Number list not aligned

Answer 1

にとposition: relative;あなたはのための負でのmargin-leftを使用することができます：李放置前とパディング。 :: 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 2

<li>

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

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

Answer 3

私のカウンター李を確認する前に、彼にposition:absoluteを与え、＃私のカウンターのLiが `li`に`パディング-left`を追加し、彼に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>