Liste ohne Einzug?

Question

Ich bin über diese Geige gekommen, ich möchte, dass die 2.1 keinen INDENT hat. Bitte sehen Sie unten einen Code, den ich von jemand anderem bekommen habe, funktioniert wie ein Zauber, aber ich möchte die Einrückungen nicht! Irgendwelche Ideen? Wenn jemand helfen kann, wäre es sehr dankbar, danke!

der Code:

ol { 
 
    list-style-type: none; 
 
    counter-reset: item; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    display: table; 
 
    counter-increment: item; 
 
    margin-bottom: 0.6em; 
 
} 
 

 
li:before { 
 
    content: counters(item, ".") ". "; 
 
    display: table-cell; 
 
    padding-right: 0.6em;  
 
} 
 

 
li li { 
 
    
 
    margin:0; 
 
    
 
    
 
} 
 

 
li li:before { 
 
    content: counters(item, ".") " "; 
 
    margin:0; 
 
}

<ol> 
 
    <li>Lorem ipsum.</li> 
 
    <li>Excepteur sint occaecat cupidatat non proident: 
 
     <ol> 
 
      <li>sunt in culpa qui officia,</li> 
 
      <li>deserunt mollit anim id est laborum.</li> 
 
     </ol> 
 
    </li> 
 
    <li>Ut enim ad minim veniam. 
 
     <ol> 
 
      <li>Quis nostrud exercitation.</li> 
 
      <li>Ullamco laboris nisi ut. 
 
       <ol> 
 
        <li> 
 
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
        </li> 
 
       </ol> 
 
      </li> 
 
     </ol> 
 
    </li> 
 
    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</li> 
 
</ol>

Answer 1

Sie benötigen display: table und display:table-cell von CSS zu entfernen.

ol { 
 
    list-style-type: none; 
 
    counter-reset: item; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    counter-increment: item; 
 
    margin-bottom: 0.6em; 
 
} 
 

 
li:before { 
 
    content: counters(item, ".") ". "; 
 
    padding-right: 0.6em;  
 
} 
 

 
li li { 
 
    margin: 0; 
 
} 
 

 
li li:before { 
 
    content: counters(item, ".") " "; 
 
    margin:0; 
 
}

<ol> 
 
    <li>Lorem ipsum.</li> 
 
    <li>Excepteur sint occaecat cupidatat non proident: 
 
     <ol> 
 
      <li>sunt in culpa qui officia,</li> 
 
      <li>deserunt mollit anim id est laborum.</li> 
 
     </ol> 
 
    </li> 
 
    <li>Ut enim ad minim veniam. 
 
     <ol> 
 
      <li>Quis nostrud exercitation.</li> 
 
      <li>Ullamco laboris nisi ut. 
 
       <ol> 
 
        <li> 
 
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
        </li> 
 
       </ol> 
 
      </li> 
 
     </ol> 
 
    </li> 
 
    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</li> 
 
</ol>

Answer 2

wenn Sie alle Text auf dem gleichen Niveau zu bleiben, die einzige Lösung kam ich mit ist feste Breite auf die li:before

siehe Schnipsel>

einstellen

ol { 
 
    list-style-type: none; 
 
    counter-reset: item; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    display: table-row; 
 
    counter-increment: item; 
 
    margin-bottom: 0.6em; 
 
} 
 

 
li:before { 
 
    content: counters(item, ".") ". "; 
 
    display: inline-block; 
 
    margin: 0; 
 
    width: 40px; 
 
} 
 

 
li li { 
 
    margin: 0; 
 
}

<ol> 
 
    <li>Lorem ipsum.</li> 
 
    <li>Excepteur sint occaecat cupidatat non proident: 
 
     <ol> 
 
      <li>sunt in culpa qui officia,</li> 
 
      <li>deserunt mollit anim id est laborum.</li> 
 
     </ol> 
 
    </li> 
 
    <li>Ut enim ad minim veniam. 
 
     <ol> 
 
      <li>Quis nostrud exercitation.</li> 
 
      <li>Ullamco laboris nisi ut. 
 
       <ol> 
 
        <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
        </li> 
 
       </ol> 
 
      </li> 
 
     </ol> 
 
    </li> 
 
    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</li> 
 
</ol>