Trang web của tôi có danh sách 'nhỏ': ví dụ: danh sách 100 mục, mỗi mục có độ dài một từ. Để giảm việc cuộn, tôi muốn trình bày danh sách này trong hai hoặc thậm chí bốn cột trên trang. Tôi nên làm như thế nào với CSS?

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

Tôi thích giải pháp linh hoạt để nếu danh sách tăng lên 200 mục, tôi không phải thực hiện nhiều điều chỉnh thủ công để phù hợp với danh sách mới.

Giải pháp CSS là: http://www.w3.org/TR/css3-multicol/

Hỗ trợ trình duyệt chính xác là những gì bạn mong đợi ..

Nó hoạt động "ở mọi nơi" ngoại trừ Internet Explorer 9 trở lên: http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

Xem: http://jsfiddle.net/pdExf/

Nếu cần hỗ trợ IE, bạn sẽ phải sử dụng JavaScript, ví dụ:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Một giải pháp khác là để dự phòng bình thường float: leftcho chỉ IE . Thứ tự sẽ sai, nhưng ít nhất nó sẽ trông giống nhau:

Xem: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

Bạn có thể áp dụng dự phòng đó với Modernizr nếu bạn đã sử dụng nó.

Nếu bạn đang tìm kiếm một giải pháp hoạt động được trong IE, bạn có thể thả nổi các phần tử danh sách sang bên trái. Tuy nhiên, điều này sẽ dẫn đến một danh sách xung quanh, như sau:

item 1 | item 2 | item 3
item 4 | item 5

Thay vì các cột gọn gàng, như:

item 1 | item 4
item 2 | 
item 3 | 

Mã để làm điều đó sẽ là:

ul li {
  width:10em;
  float:left;
}

Bạn có thể thêm đường viền dưới cùng vào các lis để làm cho dòng chảy của các mục từ trái sang phải rõ ràng hơn.

Nếu bạn muốn một số cột đặt trước, bạn có thể sử dụng cột đếm và khoảng cách cột, như đã đề cập ở trên.

Tuy nhiên, nếu bạn muốn một cột duy nhất có chiều cao hạn chế có thể chia thành nhiều cột hơn nếu cần, điều này có thể đạt được khá đơn giản bằng cách thay đổi hiển thị thành linh hoạt.

Điều này sẽ không hoạt động trên IE9 và một số trình duyệt cũ khác. Bạn có thể kiểm tra hỗ trợ trên Tôi có thể sử dụng không

<style>
  ul {
    display: -ms-flexbox;           /* IE 10 */
    display: -webkit-flex;          /* Safari 6.1+. iOS 7.1+ */
    display: flex;
    -webkit-flex-flow: wrap column; /* Safari 6.1+ */
    flex-flow: wrap column;
    max-height: 150px;              /* Limit height to whatever you need */
  }
</style>

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

Câu trả lời này không nhất thiết phải mở rộng quy mô mà chỉ yêu cầu điều chỉnh nhỏ khi danh sách phát triển. Về mặt ngữ nghĩa, nó có vẻ hơi phản trực quan vì nó là hai danh sách, nhưng ngoài điều đó ra, nó sẽ trông theo cách bạn muốn trong bất kỳ trình duyệt nào từng tạo.

ul {
  float: left;
}

ul > li {
  width: 6em;
}

<!-- Column 1 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- Column 2 -->
<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

2020 - giữ cho nó đơn giản, sử dụng CSS Grid

Rất nhiều câu trả lời trong số này đã lỗi thời, đó là năm 2020 và chúng tôi không nên cho phép những người vẫn đang sử dụng IE9. Cách đơn giản hơn là chỉ sử dụng lưới CSS .

Mã này rất đơn giản và bạn có thể dễ dàng điều chỉnh số lượng cột đang sử dụng grid-template-columns. Xem điều này và sau đó chơi với trò chơi này để phù hợp với nhu cầu của bạn.

.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<ul class="grid-list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Tôi nhận thấy rằng (hiện tại) Chrome ( Version 52.0.2743.116 m) có rất nhiều câu hỏi và vấn đề với css column-countliên quan đến các mục tràn và các phần tử được định vị tuyệt đối bên trong các mục, đặc biệt là với một số chuyển đổi thứ nguyên ..

đó là một mớ hỗn độn và không thể sửa chữa được, vì vậy tôi đã thử giải quyết vấn đề này thông qua javascript đơn giản và đã tạo một thư viện thực hiện điều đó - https://github.com/yairEO/listBreaker

Trang demo

Nếu bạn có thể hỗ trợ nó, CSS Grid có lẽ là cách tốt nhất để tạo danh sách một chiều thành bố cục hai cột với nội thất đáp ứng.

ul {
  max-width: 400px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 0;
  border: 1px solid blue;
}

li {
  list-style: inside;
  border: 1px dashed red;
  padding: 10px;
}

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

Đây là hai dòng chính sẽ cung cấp cho bạn bố cục 2 cột của bạn

display: grid;
grid-template-columns: 50% 50%;

Cách ưu tiên cho thiết bị di động là sử dụng CSS Columns để tạo trải nghiệm cho màn hình nhỏ hơn, sau đó sử dụng Media Queries để tăng số lượng cột tại mỗi điểm ngắt được xác định trong bố cục của bạn.

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Đây là những gì tôi đã làm

ul {
      display: block;
      width: 100%;
}

ul li{
    display: block;
    min-width: calc(30% - 10px);
    float: left;
}

ul li:nth-child(2n + 1){
    clear: left;
}

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