Lây lan các cột CSS theo chiều ngang thay vì theo chiều dọc

Question

Tôi không chắc chắn rằng điều này là có thể (ít nhất là từ kinh nghiệm của tôi hoặc Googling), nhưng tôi đã tự hỏi nếu có một cách để buộc thứ tự của cột CSS. Ví dụ, thay vì:

item1  item4  item7 
item2  item5  item8 
item3  item6  item9 

sắp xếp chúng như thế này:

item1  item2  item3 
item4  item5  item6 
item7  item8  item9 

html được như thế này:

<ul> 
    <li>item1</li> 
    <li>item2</li> 
    etc... 
</ul> 

Dĩ nhiên tôi có thể sử dụng một bảng (không nhờ) hoặc phao nổi , nhưng tôi đã hy vọng sử dụng thuộc tính CSS columns.

Answer 1

Có hai cách bạn có thể thực hiện việc này.

Hoặc sử dụng display: inline-block; hoặc sử dụng màn hình: flex;

Đây là màn hình: inline-block; Ví dụ:

ul { 
 
\t margin-left: .25em; 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
} 
 
li { 
 
\t margin-left: 0; 
 
\t padding-left: 0; 
 
\t display: inline-block; 
 
\t width: 30%; 
 
\t vertical-align: top; 
 
}

<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    <li>item 5</li> 
 
    <li>item 6</li> 
 
    <li>item 7</li> 
 
    <li>item 8</li> 
 
    <li>item 9</li> 
 
</ul>

Và đây là màn hình hiển thị: flex; ví dụ:

Lưu ý: Flex được hỗ trợ một chút trong IE11 nhưng được hỗ trợ đầy đủ trong Edge. Nó được hỗ trợ đầy đủ trong mọi evergreens.

ul { 
 
\t margin-left: .25em; 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
li { 
 
\t margin-left: 0; 
 
\t padding-left: 0; 
 
\t width: 33.3%; 
 
}

<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    <li>item 5</li> 
 
    <li>item 6</li> 
 
    <li>item 7</li> 
 
    <li>item 8</li> 
 
    <li>item 9</li> 
 
</ul>