Bagaimana cara menampilkan daftar tidak berurutan dalam dua kolom?


215

Dengan HTML berikut, metode apa yang paling mudah untuk menampilkan daftar sebagai dua kolom?

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

Tampilan yang diinginkan:

A B
C D
E

Solusinya harus dapat bekerja di Internet Explorer.


1
Berikut ini adalah contoh langsung bagaimana melakukannya dengan mudah di jquery: jsfiddle.net/EebVF/5 Menggunakan plugin jquery ini: github.com/fzondlo/jquery-columns - Saya suka ini lebih baik daripada dengan CSS karena dengan solusi CSS tidak semuanya sejajar secara vertikal ke atas.
newUserNameHere

Jawaban:


371

Peramban Modern

memanfaatkan modul kolom css3 untuk mendukung apa yang Anda cari.

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

http://jsfiddle.net/HP85j/8/

Browser Warisan

Sayangnya untuk dukungan IE Anda memerlukan solusi kode yang melibatkan JavaScript dan manipulasi dom. Ini berarti bahwa kapan saja isi daftar berubah, Anda perlu melakukan operasi untuk menyusun ulang daftar menjadi kolom dan mencetak ulang. Solusi di bawah ini menggunakan jQuery untuk singkatnya.

http://jsfiddle.net/HP85j/19/

HTML:

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

JavaScript:

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS:

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}

EDIT:

Seperti yang ditunjukkan di bawah ini akan memesan kolom sebagai berikut:

A  E
B  F
C  G
D

sementara OP meminta varian yang cocok dengan yang berikut:

A  B
C  D
E  F
G

Untuk menyelesaikan varian, Anda cukup mengubah kode sebagai berikut:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column > columns.length){
            column = 0;
        }
        $(columns.get(column)).append(el);
        column += 1;
    });
}

2
Anda tidak menampilkan item dalam urutan yang benar: jsfiddle.net/HP85j/258 Misalnya, tampilan yang diinginkan di baris pertama adalah A B(elemen kedua harus ditambahkan di sebelah kanan), tetapi dalam contoh Anda adalah A E.
Paolo Moretti

1
Kerja bagus, meskipun logikanya cacat jika ada lebih dari 2 kolom, saya telah membuat perbaikannya di sini: jsfiddle.net/HP85j/393
Tr1stan

2
peluru tidak ada
Jaider

1
Mungkin lebih mungkin menginginkan daftar untuk mengisi kolom 1 sebelum kolom 2. Mungkin lebih mudah untuk memesan ulang item dari daftar sehingga tampak bahwa mereka mengisi sebelum turun. Tentu saja itu mungkin memerlukan pengulangan jika daftar berubah. Bagaimanapun, jawaban CSS Gabriel adalah apa yang saya butuhkan, terima kasih!
punstress

3
Hanya pembaruan yang terlambat, saya yakin opsi pertama sekarang akan berfungsi di browser IE modern.
Fizz

82

Saya melihat solusi @ jaider yang bekerja tetapi saya menawarkan pendekatan yang sedikit berbeda yang menurut saya lebih mudah untuk dikerjakan dan yang saya lihat bagus di seluruh browser.

ul{
    list-style-type: disc;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    list-style-position: inside;//this is important addition
}

Secara default daftar yang tidak dipesan menampilkan posisi bullet di luar tetapi kemudian di beberapa browser akan menyebabkan beberapa masalah tampilan berdasarkan cara peramban meletakkan situs web Anda.

Untuk menampilkannya dalam format:

A B
C D
E

dll. gunakan yang berikut ini:

ul li{
    float: left;
    width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}
ul{
    list-style-type: disc;
}

Ini akan menyelesaikan semua masalah Anda dengan menampilkan kolom. Semua yang terbaik dan terima kasih @orang asing karena respons Anda membantu membimbing saya untuk menemukan ini.


3
Ada masalah dengan metode ini. Ini berfungsi baik untuk menampilkan item daftar yang sangat pendek (1 karakter dalam contoh ini). Buat daftar dengan deskripsi yang lebih panjang dan kolom kedua tumpang tindih yang pertama, serta kehabisan wadah ul.
Shaggy

1
Saya men-tweak ini sedikit dengan mengubah float: left to display: inline-block untuk elemen li, selain itu ini berhasil bagi saya.
ZeRemz

41

Saya mencoba memposting ini sebagai komentar, tetapi tidak dapat menampilkan kolom dengan benar (sesuai pertanyaan Anda).

Anda meminta:

AB

CD

E

... tetapi jawaban yang diterima sebagai solusi akan kembali:

IKLAN

MENJADI

C

... jadi jawabannya salah atau pertanyaannya adalah.

Solusi yang sangat sederhana adalah dengan mengatur lebar barang Anda <ul>dan kemudian mengapung dan mengatur lebar <li>barang Anda seperti itu

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

ul{
    width:210px;
}
li{
    background:green;
    float:left;
    height:100px;
    margin:0 10px 10px 0;
    width:100px;
}
li:nth-child(even){
    margin-right:0;
}

Contoh di sini http://jsfiddle.net/Jayx/Qbz9S/1/

Jika pertanyaan Anda salah, maka jawaban sebelumnya berlaku (dengan perbaikan JS karena kurangnya dukungan IE).


@Gabriel solusi Anda dan perilakunya baik dan seperti yang diharapkan, jadi saya tidak mencoba untuk mengetuk jawaban Anda, hei ... Saya hanya berpikir bahwa pertanyaannya mungkin telah disalahartikan ... bagaimanapun juga - pertanyaan telah dijawab tidak peduli yang merupakan pertanyaan yang benar: D
Jayx

16

Saya suka solusi untuk peramban modern, tetapi peluru tidak ada, jadi saya tambahkan sedikit trik:

http://jsfiddle.net/HP85j/419/

ul {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


li:before {
  content: "• ";
}

masukkan deskripsi gambar di sini


Di sini kita dapat mengubah warna item tanpa mengubah warna bullet jsfiddle.net/HP85j/444
Jaider

3
Saya pikir list-style-position: inside;ini adalah solusi yang lebih baik bagi peluru untuk muncul dengan benar.
Alexis Wilke

11

Inilah solusi yang mungkin:

Potongan:

ul {
  width: 760px;
  margin-bottom: 20px;
  overflow: hidden;
  border-top: 1px solid #ccc;
}
li {
  line-height: 1.5em;
  border-bottom: 1px solid #ccc;
  float: left;
  display: inline;
}
#double li {
  width: 50%;
}
<ul id="double">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
</ul>

Dan itu dilakukan.
Untuk 3 kolom gunakan lilebar 33%, untuk 4 kolom gunakan 25% dan seterusnya.


5

Ini adalah cara paling sederhana untuk melakukannya. Hanya CSS.

  1. tambahkan lebar ke elemen ul.
  2. tambah tampilan: inline-blok dan lebar kolom baru (harus kurang dari setengah dari lebar ul).
ul.list {
  width: 300px;  
}

ul.list li{
  display:inline-block;
  width: 100px;
}
<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

2
Tambahkan beberapa penjelasan dengan jawaban untuk bagaimana jawaban ini membantu OP dalam memperbaiki masalah saat ini
ρяσѕρєя K

4

Anda dapat menggunakan CSS hanya untuk mengatur dua kolom atau lebih

AE

B

C

D

 <ul class="columns">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

ul.columns  {
   -webkit-columns: 60px 2;
   -moz-columns: 60px 2;
    columns: 60px 2;
   -moz-column-fill: auto;
   column-fill: auto;
 }


2

Anda dapat melakukan ini dengan sangat mudah dengan Plugin jQuery-Columns misalnya untuk membagi ul dengan kelas .mylist yang akan Anda lakukan

$('.mylist').cols(2);

Inilah contoh langsung tentang jsfiddle

Saya suka ini lebih baik daripada dengan CSS karena dengan solusi CSS tidak semuanya sejajar secara vertikal ke atas.


Menarik, tetapi sebenarnya memecah <ul>daftar dalam beberapa daftar ... Itu bisa menyulitkan hal-hal lain.
Alexis Wilke

Ini sebenarnya solusi yang saya kejar, untuk downvoter jawaban ini valid jika Anda membaca pertanyaan OP dan tidak perlu DV.
Tricky

2

lebih banyak satu jawaban setelah beberapa tahun!

dalam artikel ini: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

HTML:

<ul id="double"> <!-- Alter ID accordingly -->
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>

CSS:

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;}
#triple li  { width:33.333%; }
#quad li    { width:25%; }
#six li     { width:16.666%; }

1

Dalam updateColumns()kebutuhan if (column >= columns.length)daripada if (column > columns.length)untuk membuat daftar semua elemen (C dilewati misalnya) sehingga:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column >= columns.length){
            column = 0;
        }
        console.log(column, el, idx);
        $(columns.get(column)).append(el);
        column += 1;
    });
}

http://jsfiddle.net/e2vH9/1/



1

Solusi lawas dalam jawaban teratas tidak berfungsi untuk saya karena saya ingin memengaruhi banyak daftar pada halaman dan jawabannya mengasumsikan satu daftar ditambah ia menggunakan sedikit keadaan global. Dalam hal ini saya ingin mengubah setiap daftar di dalam <section class="list-content">:

const columns = 2;
$("section.list-content").each(function (index, element) {
    let section = $(element);
    let items = section.find("ul li").detach();
    section.find("ul").detach();
    for (let i = 0; i < columns; i++) {
        section.append("<ul></ul>");
    }
    let lists = section.find("ul");
    for (let i = 0; i < items.length; i++) {
        lists.get(i % columns).append(items[i]);
    }
});

bagaimana mungkin misalnya menghasilkan dua kolom, satu berisi ubin dan yang lainnya daftar tidak terurut?
Dalek

Tidak yakin apa yang Anda maksud. Jika Anda memiliki serangkaian item dengan judul, Anda dapat menempatkannya dalam satu daftar judul, item, judul, item dan kemudian ini akan bekerja untuk Anda.
Tom

1

Meskipun saya menemukan Gabriel menjawab untuk bekerja pada tingkat tertentu, saya menemukan yang berikut ketika mencoba untuk memesan daftar secara vertikal (ul pertama dan kedua ul EG):

  • Ketika ul memiliki jumlah genap di dalamnya, itu tidak menyebar secara merata di seluruh ul itu
  • menggunakan data-kolom di ul tampaknya tidak berfungsi dengan baik, saya harus meletakkan 4 untuk 3 kolom dan bahkan kemudian masih menyebarkan li ke 2 dari ul yang dihasilkan oleh JS

Saya telah merevisi JQuery sehingga hal di atas semoga tidak terjadi.

(function ($) {
    var initialContainer = $('.customcolumns'),
        columnItems = $('.customcolumns li'),
        columns = null,
        column = 0;
    function updateColumns() {
        column = 0;
        columnItems.each(function (idx, el) {
            if ($(columns.get(column)).find('li').length >= (columnItems.length / initialContainer.data('columns'))) {
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns() {
        columnItems.detach();
        while (column++ < initialContainer.data('columns')) {
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.customcolumns');
        updateColumns();
    }

    $(setupColumns);
})(jQuery);
.customcolumns {
  float: left;
  position: relative;
  margin-right: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="customcolumns" data-columns="3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
  </ul>
</div>

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.