Màn hình: table-cell trên hàng mới

Question

Dưới đây là một ví dụ mã cho những gì tôi có nghĩa là:

HTML

<ul class="table"> 
    <li class="table-cell"></li> 
    <li class="table-cell"></li> 
    <li class="table-cell"></li> 
    <li class="table-cell"></li> 
</ul> 

CSS:

.table { 
    display: table; 
} 

.table-cell { 
    display: table-cell; 
    width: 25%; 
} 

Q: Làm thế nào tôi có thể làm cho ba và ra <li> (ô bảng) hiển thị trên hàng mới có chiều rộng: 50% mỗi ô?

Hỏi: Có cách nào chỉ sử dụng CSS chứ không phải jQuery hoặc Javascript không?

Answer 1

Câu trả lời đơn giản là: bạn không thể, ít nhất là không có danh sách. Các phần tử liền kề với bộ hiển thị của chúng được đặt là table-cell được coi là thuộc cùng một hàng (ngay cả khi phần tử hàng không được cung cấp, phần tử ẩn danh sẽ được tạo cho bạn). Vì danh sách không được phép chứa bất kỳ thẻ nào khác giữa ul và li, điều này đơn giản là không thể với danh sách. Bạn sẽ phải sử dụng đánh dấu khác nhau hoặc kiểu dáng khác nhau.

Dưới đây là các tùy chọn của bạn nếu bạn không muốn sửa đổi đánh dấu.

Inline-block vào các mục danh sách: http://jsfiddle.net/XNq74/1/

li { 
    display: inline-block; /* could use floats here instead */ 
    width: 40%; 
} 

cột CSS sẽ là một sự lựa chọn hợp lý: http://jsfiddle.net/XNq74/

ul { 
    columns: 2; 
} 

http://caniuse.com/#feat=multicolumn

Flexbox cũng sẽ làm việc và có thể được sử dụng trong kết hợp với inline-block: http://jsfiddle.net/XNq74/2/

ul { 
    display: flex; 
    flex-flow: row wrap; 
} 

li { 
    flex: 1 1 40%; 
} 

http://caniuse.com/#search=flexbox

Answer 2

ul.table li+li+li { /** your CSS code **/ } This one is for the third element 


ul.table li.last { /** your CSS code **/ } This one is for the fourth element