ol li compter dans deux colonne dans le navigateur chrome

Question

je suis essayer de montrer ol li dans deux colonnes dans le navigateur chrome. mais obtenez ci-dessous le résultat mentionné, regardez l'image pls.

mon code:

#answerlistli { 

     -moz-column-count: 2; 
     -moz-column-gap: 20px; 
     -webkit-column-count: 2; 
     -webkit-column-gap: 20px; 
     column-count: 2; 
     column-gap: 20px; 

    } 

 <ol id="answerlistli" style="font-size: 20px; font-weight: bolder;"> 

        <li id="td1"></li> 
        <li id="td2"></li> 
        <li id="td3"></li> 
        <li id="td4"></li> 
        <li id="td5"></li> 
        <li id="td6"></li> 
        <li id="td7"></li> 
        <li id="td8"></li> 
        <li id="td9"></li> 
        <li id="td10"></li> 
        <li id="td11"></li> 
        <li id="td12"></li> 
        <li id="td13"></li> 
        <li id="td14"></li> 
        <li id="td15"></li> 
        <li id="td16"></li> 
        <li id="td17"></li> 
        <li id="td18"></li> 
        <li id="td19"></li> 
        <li id="td20"></li> 
        <li id="td21"></li> 
        <li id="td22"></li> 
        <li id="td23"></li> 
        <li id="td24"></li> 
        <li id="td25"></li> 
        <li id="td26"></li> 
        <li id="td27"></li> 
        <li id="td28"></li> 
        <li id="td29"></li> 
        <li id="td30"></li> 
        <li id="td31"></li> 
        <li id="td32"></li> 
        <li id="td33"></li> 

       </ol> 

mais en deuxième numéros de colonne DonT semble en chrome. mais dans mozilla cela fonctionne.

image en chrome:

Answer 1

La "magie" est autour list-style-position, il doit être à l'intérieur:

#answerlistli { 
 
    list-style-position: inside; 
 

 
    -moz-column-count: 2; 
 
    -moz-column-gap: 20px; 
 
    -webkit-column-count: 2; 
 
    -webkit-column-gap: 20px; 
 
    column-count: 2; 
 
    column-gap: 20px; 
 
}

<ol id="answerlistli" style="font-size: 20px; font-weight: bolder;"> 
 
    <li id="td1"></li> 
 
    <li id="td2"></li> 
 
    <li id="td3"></li> 
 
    <li id="td4"></li> 
 
    <li id="td5"></li> 
 
    <li id="td6"></li> 
 
    <li id="td7"></li> 
 
    <li id="td8"></li> 
 
    <li id="td9"></li> 
 
    <li id="td10"></li> 
 
    <li id="td11"></li> 
 
    <li id="td12"></li> 
 
    <li id="td13"></li> 
 
    <li id="td14"></li> 
 
    <li id="td15"></li> 
 
    <li id="td16"></li> 
 
    <li id="td17"></li> 
 
    <li id="td18"></li> 
 
    <li id="td19"></li> 
 
    <li id="td20"></li> 
 
    <li id="td21"></li> 
 
    <li id="td22"></li> 
 
    <li id="td23"></li> 
 
    <li id="td24"></li> 
 
    <li id="td25"></li> 
 
    <li id="td26"></li> 
 
    <li id="td27"></li> 
 
    <li id="td28"></li> 
 
    <li id="td29"></li> 
 
    <li id="td30"></li> 
 
    <li id="td31"></li> 
 
    <li id="td32"></li> 
 
    <li id="td33"></li> 
 
</ol>