Tại sao sử dụng cột CSS3 trong Chrome loại bỏ số mục trên danh sách

Question

tôi nhận thấy rằng chrome đã xóa số trên của tôi list-mục khi tôi thêm css để thao tác cột-count ...

Ví dụ:

<ol style =-webkit-column-count: 2;..."> 
    .... 
</ol> 

Ở trên không quản lý để tràn của li vào một cột riêng biệt như dự định nhưng nó loại bỏ số mục mặc định là tốt. Điều này không xảy ra trong Firefox, chỉ có chrome.

Bất kỳ ý tưởng nào?

Answer 1

Bạn luôn có thể chỉ cần ném <div> xung quanh <ol> và cung cấp cho <div> nhiều cột thay vì <ol>.

<div style = -webkit-column-count: 2;...><ol> 
    .... 
</ol></div> 

Khi tôi làm điều đó, tuy nhiên, tôi kết thúc với cột thứ hai là một dòng cao hơn cột thứ nhất vì một lý do nào đó. Cũng chỉ xảy ra trong Chrome.

Edit: Giải pháp cho vấn đề trên của tôi chỉ là để thêm một biên độ zero cho <ol>, vì vậy đây sẽ làm việc tốt:

<div style = -webkit-column-count: 2;...><ol style = margin: 0;> 
    .... 
</ol></div> 

Lạ lùng thay, có một số padding trên <ol> dường như thoát khỏi con số là tốt, vì vậy nếu bạn có padding một nơi nào đó có thể là thủ phạm.

Answer 2

Dường như số thực sự bị ẩn. Điều này có thể được giải quyết bằng cách sử dụng các tài sản sau đây:

OL { 
    list-style-position: inside; 
} 

Answer 3

Thường style sheet của một người sẽ có một thiết lập lại html, trong đó có một thiết lập lại padding: 0; vào các mặt hàng trong danh sách.

trong khi những điều sau đây, bởi Stéphane hoạt động giống như một nét duyên dáng,

ul { 
    list-style-position: inside; 
} 

bạn cũng có thể cung cấp cho mục danh sách của bạn một padding-left:

padding-left: 16px; 

Answer 4

Đối với một số phong cách danh sách lý do vị trí bên ngoài các phần tử (mặc định) được ẩn khi bạn áp dụng quy tắc column-width. Dưới đây là cách tốt nhất tôi có thể đưa ra để thử và mô phỏng hành vi 'được mong đợi' trong Chrome dựa trên các câu trả lời khác và thử nghiệm của riêng tôi.

Demo

HTML

<div class="col-wrapper"> 
    <ol> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
    </ol> 
</div> 

CSS

.col-wrapper { 
    -moz-column-width: 200px; 
    -moz-column-gap: 1em; 
    -webkit-column-width: 200px; 
    -webkit-column-gap: 1em; 
    column-width: 200px; 
    column-gap: 1em; 

    /* (optional) use ol's margin here */ 
    margin-top: 16px; 
} 

.col-wrapper ol { 
    /* clear top margin of ol */ 
    margin-top: 0; 
}