ol li은 크롬 브라우저에서 두 열로 계산됩니다.

Question

저는 크롬 브라우저에서 ol 열을 두 열로 표시하려고합니다. 그러나 아래에 언급 된 결과를 얻으려면 그림 pls를보십시오.

내 코드 :

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

하지만 두 번째 열 번호에

#answerlistli { 

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

    } 

해달라고 크롬에 ​​보인다. 하지만 모질라에서는 작동합니다. 크롬

사진 :

Answer 1

은 "마법"주위 list-style-position, 그것은 내부해야한다 :

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