Bagaimana cara menampilkan daftar tidak berurutan dalam dua kolom?

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.

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;
    });
}

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.

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

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: "• ";
}

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.

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>

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

Ini dapat dicapai dengan menggunakan properti css penghitungan kolom pada div induk,

Suka

 column-count:2;

lihat ini untuk lebih jelasnya.

Cara membuat daftar DIV mengambang muncul di kolom, bukan baris

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.

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

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/

Dengan Bootstrap ... Jawaban ini ( https://stackoverflow.com/a/23005046/1128742 ) membuat saya menunjuk ke arah solusi ini:

<ul class="list-unstyled row">
   <li class="col-xs-6">Item 1</li>
   <li class="col-xs-6">Item 2</li>
   <li class="col-xs-6">Item 3</li>
</ul>

http://jsfiddle.net/patrickbad767/472r0ynf/

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]);
    }
});

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>

Thisd adalah solusi sempurna bagi saya, mencarinya selama bertahun-tahun:

http://css-tricks.com/forums/topic/two-column-unordered-list/