2017-05-01 13 views
0

我嘗試在Chrome瀏覽器的兩列中顯示ol li。但得到下面提到的結果,看圖片請。ol li在Chrome瀏覽器的兩列中計數

我的代碼:

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

但在第二列數字不似乎鉻。但在Mozilla中它的工作原理。

圖片在chrome: enter image description here

回答

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>

+0

THX很多羅馬。它工作,很好的工作。 –

相關問題