Halaman web saya memiliki daftar 'kurus': misalnya, daftar 100 item yang masing-masing terdiri dari satu kata. Untuk mengurangi pengguliran, saya ingin menyajikan daftar ini dalam dua atau bahkan empat kolom di halaman. Bagaimana saya harus melakukan ini dengan 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>

Saya lebih suka solusi yang fleksibel sehingga jika daftar bertambah menjadi 200 item, saya tidak perlu melakukan banyak penyesuaian manual untuk mengakomodasi daftar baru.

Solusi CSS adalah: http://www.w3.org/TR/css3-multicol/

Dukungan browser persis seperti yang Anda harapkan ..

Ia bekerja "di mana saja" kecuali Internet Explorer 9 atau yang lebih lama: 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;
}

Lihat: http://jsfiddle.net/pdExf/

Jika dukungan IE diperlukan, Anda harus menggunakan JavaScript, misalnya:

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

Solusi lain adalah mengembalikan ke normal hanyafloat: left untuk IE . Urutannya akan salah, tetapi setidaknya akan terlihat serupa:

Lihat: http://jsfiddle.net/NJ4Hw/

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

Anda dapat menerapkan fallback itu dengan Modernizr jika Anda sudah menggunakannya.

Jika Anda mencari solusi yang juga berfungsi di IE, Anda dapat menempatkan elemen daftar ke kiri. Namun, ini akan menghasilkan daftar ular, seperti ini:

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

Alih-alih kolom rapi, seperti:

item 1 | item 4
item 2 | 
item 3 | 

Kode untuk melakukannya adalah:

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

Anda bisa menambahkan border-bottom ke lis untuk membuat aliran item dari kiri ke kanan lebih jelas.

Jika Anda menginginkan jumlah kolom yang telah ditentukan, Anda dapat menggunakan kolom-count dan kolom-gap, seperti yang disebutkan di atas.

Namun, jika Anda menginginkan satu kolom dengan ketinggian terbatas yang akan dibagi menjadi lebih banyak kolom jika diperlukan, ini dapat dicapai cukup dengan mengubah tampilan menjadi fleksibel.

Ini tidak akan berfungsi di IE9 dan beberapa browser lama lainnya. Anda dapat memeriksa dukungan di Can I use

<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>

Jawaban ini tidak selalu berskala tetapi hanya membutuhkan sedikit penyesuaian seiring bertambahnya daftar. Secara semantik ini mungkin tampak sedikit kontra-intuitif karena ini adalah dua daftar, tetapi selain itu akan terlihat seperti yang Anda inginkan di browser apa pun yang pernah dibuat.

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 - tetap sederhana, gunakan CSS Grid

Banyak dari jawaban ini sudah ketinggalan zaman, ini tahun 2020 dan kami seharusnya tidak mengaktifkan orang-orang yang masih menggunakan IE9. Jauh lebih sederhana dengan hanya menggunakan kisi CSS .

Kodenya sangat sederhana, dan Anda dapat dengan mudah menyesuaikan berapa banyak kolom yang ada menggunakan grid-template-columns. Lihat ini dan kemudian bermain-main dengan biola ini agar sesuai dengan kebutuhan Anda.

.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>

Saya menemukan bahwa (saat ini) Chrome ( Version 52.0.2743.116 m) memiliki banyak sekali kebiasaan dan masalah dengan css column-countterkait item overflow dan elemen posisi absolut di dalam item, terutama dengan beberapa transisi dimensi ..

Ini benar-benar berantakan dan tidak dapat diperbaiki, jadi saya mencoba menangani ini melalui javascript sederhana, dan telah membuat perpustakaan yang melakukan itu - https://github.com/yairEO/listBreaker

Halaman demo

Jika Anda dapat mendukungnya, CSS Grid mungkin adalah cara terbersih untuk membuat daftar satu dimensi menjadi tata letak dua kolom dengan interior responsif.

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>

Ini adalah dua baris kunci yang akan memberi Anda tata letak 2 kolom Anda

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

Cara pertama seluler adalah menggunakan Kolom CSS untuk menciptakan pengalaman layar yang lebih kecil, lalu menggunakan Media Queries untuk meningkatkan jumlah kolom di setiap breakpoint yang ditentukan tata letak Anda.

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>

Inilah yang saya lakukan

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>