2012-09-10 48 views
11

例如這裏沒有顯示:http://jsfiddle.net/R7GUZ/3/如何修復列表樣式上的Webkit使用CSS3列時

我有一個時間去list-style赫克在webkit的工作與

-webkit-column-count: 2; 
-moz-column-count: 2; 
column-count: 2; 
風格父OL

如何使用css3將有序列表格式化爲列,並仍然保持list-style樣式?

  <ol class="text-col2"> 
       <li> 
        <strong>Can we call you?</strong> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p> 
       </li> 

       <li> 
        <strong>Can we call you?</strong> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p> 
       </li> 
      </ol> 

回答

15

添加20像素的保證金留給li小號的伎倆

ol li { 
    list-style: decimal; 
    margin-left: 20px 
} 
+0

謝謝,這個問題讓我發瘋,直到我認爲這是一個列v列表式圖像問題。你的解決方案的工作原理,儘管我也刪除了ol/ul元素的填充,所以我沒有不必要的額外空間。 –

7

看來號碼是隱藏的。這可以通過使用以下屬性來解決:

OL { 
    list-style-position: inside; 
} 

注意如果你(在的jsfiddle您的例子,其中CSS已經標準化等)重置marginpadding性能,你必須將它們設置爲正確的值使列正確格式化。

相關問題