Apakah ada cara untuk memecah daftar menjadi kolom?


119

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.


Ada perpustakaan yang melakukan itu - github.com/yairEO/listBreaker
vsync

Saya percaya bahwa opsi kolom CSS akan dilakukan. Opsi ini mudah digunakan dan diubah jika diperlukan. Di sini Anda menjelaskannya secara rinci - kolosek.com/css-columns
Nesha Zoric

Jawaban:


254

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.


Apakah ada cara untuk menghapus batas atas yang pertama lidi setiap kolom?
Ya Barry

2
Ini berfungsi dengan baik untuk ruang tetap, tetapi menjadi masalah dengan desain responsif karena kolom tidak runtuh seperti saat menggunakan display: inline atau inline-block.
unifiedac

4
Fakta menarik: IE adalah satu-satunya browser desktop besar yang sepenuhnya mendukung fitur ini tanpa awalan (sejak IE10) ... Oh, ironisnya ...
NemoStein

1
Mungkin diperlukan dukungan lintas browser yang lebih baik untuk menyertakan properti tambahan ini list-style-position: inside;yang secara khusus menangani masalah yang ditunjukkan oleh @vsync yang saya yakini.
ThisClark

4
@PrafullaKumarSahu: Coba li { break-inside: avoid; }: jsfiddle.net/thirtydot/pdExf/903 . Saya tidak terlalu paham dengan kolom CSS, jadi mungkin ada cara yang lebih baik.
tigapuluhdot

19

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.


meskipun mungkin berhasil untuk sejumlah item tertentu, hasilnya tidak akan cukup untuk 2 item saja.
vsync

Solusi CSS lain yang berfungsi untuk "kolom rapi": stackoverflow.com/q/54982323/1066234
Kai Noack

10

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>


2
Sangat dekat dengan apa yang saya kejar. Satu-satunya downside adalah lebar kolom tidak menyesuaikan dengan konten (coba dengan item panjang yang berbeda). Tidak yakin bagaimana lebar kolom ditentukan. Mungkin dengan elemen pertama? Bagaimanapun, ada petunjuk tentang cara mengatasi ini?
jorgeh

Apakah mungkin untuk membatasi jumlah kolom daripada tingginya? Saya membutuhkan item untuk diisi menjadi empat kolom, dan css column-countakan melakukan jumlah baris yang tidak rata di dalam kolom. Seperti 6 item di kolom pertama, lalu 4, lalu 6, lalu 5.
Virge Assault

Akan lebih baik jika Anda memberi label pada item misalnya "Item 1", "Item 2" sehingga pemirsa dapat melihat aliran elemen
allkenang

3

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>


2

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>


1
Ini adalah solusi terbaik untuk saya.
Patee Gutee

1

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


Saya lebih suka plugin jQuery columnizer, menurut saya itu memiliki fungsionalitas yang lebih baik untuk apa yang saya lakukan (dapat mengurutkan menurut abjad, turun atau naik, jumlah kolom, lebar kolom & lainnya). jQuery Columnizer - WelcomeToTheInter.Net
Brandito

@Brandito - yah, kode Columnizer pasti memiliki lebih banyak opsi, karena hampir 1.000 baris kode, dibandingkan dengan milik saya yang sekitar 120 baris .. tetapi
berfungsi dengan

ya tapi masalah saya membutuhkan daftar untuk tetap sebagai satu daftar, apa yang lebih berguna / dibutuhkan tergantung pada kasus penggunaan.
Brandito

0

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

0

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>


0

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.