Làm cách nào để loại bỏ các mục danh sách như lưới bằng CSS và HTML?

Question

Tôi có khối div có không có chiều rộng cố định.

Bên trong, tôi có một khối <ul> <li>..</li> có 11 mục. Tôi muốn những <li> hạng mục được liệt kê bên trong div, tất cả với độ rộng bình đẳng như thế này:

##item## ##item## ##item## 
##item## ##item## ##item## 
##item## ##item## ##item## 
##item##   ##item## 

Tuy nhiên, tôi không thể sắp xếp nó ra ở tất cả.

Tôi đã cố gắng thả nổi trái và phải nhưng 3 phần tử trung tâm sẽ không được căn giữa.

Tôi có thể làm gì để làm việc này?

Cảm ơn!

Answer 1

Giải pháp đơn giản nhất là sử dụng các cột CSS:

http://jsfiddle.net/6tD2D/ (tiền tố không bao gồm)

ul { 
    columns: 3; 
} 

<ul> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
    <li>d</li> 
    <li>e</li> 
    <li>f</li> 
    <li>g</li> 
    <li>h</li> 
    <li>i</li> 
    <li>j</li> 
    <li>k</li> 
</ul> 

này sẽ cân bằng các cột như tốt nhất có thể. Tuy nhiên, nếu không có đủ yếu tố để hoàn toàn bình đẳng, nó sẽ bắt đầu loại bỏ chúng từ bên phải thay vì trung tâm.

Answer 2

Theo this câu hỏi StackOverflow, Inline Blocks có thể chỉ là những gì bạn cần.

Ồ, và nếu bạn hiện không triển khai, hãy nhớ xem CSS Grids. Nếu bạn không muốn tự xây dựng lưới CSS, this one thật tuyệt vời.

Answer 3

link Jordan được đăng ở trên là tài nguyên tuyệt vời, đặc biệt là khi nói đến hỗ trợ trình duyệt cũ hơn. Để tham khảo nhanh cho những người khác truy cập vào trang này của google, css cơ bản để tạo lưới nội tuyến ở giữa là:

ul { 
    margin: 0 auto; 
    text-align: center; 
} 

li { 
    display: inline-block; 
    vertical-align: top; 
}