Wie zeige ich eine ungeordnete Liste in zwei Spalten an?

Was ist mit dem folgenden HTML die einfachste Methode, um die Liste als zwei Spalten anzuzeigen?

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

Gewünschte Anzeige:

A B
C D
E

Die Lösung muss in Internet Explorer funktionieren können.

Moderne Browser

Nutzen Sie das CSS3-Spaltenmodul, um das zu unterstützen, wonach Sie suchen.

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

CSS:

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

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

Legacy-Browser

Leider benötigen Sie für die IE-Unterstützung eine Codelösung, die JavaScript- und Dom-Manipulationen umfasst. Dies bedeutet, dass Sie jedes Mal, wenn sich der Inhalt der Liste ändert, den Vorgang zum Neuordnen der Liste in Spalten und zum erneuten Drucken ausführen müssen. Die folgende Lösung verwendet der Kürze halber jQuery.

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

BEARBEITEN:

Wie unten ausgeführt, werden die Spalten wie folgt angeordnet:

A  E
B  F
C  G
D

während das OP nach einer Variante fragte, die der folgenden entspricht:

A  B
C  D
E  F
G

Um die Variante zu erreichen, ändern Sie einfach den Code wie folgt:

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

Ich habe mir die Lösung von @ jaider angesehen, die funktioniert hat, aber ich biete einen etwas anderen Ansatz an, mit dem ich meiner Meinung nach einfacher arbeiten kann und der sich in allen Browsern als gut erwiesen hat.

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

Standardmäßig zeigt eine ungeordnete Liste die Position des Aufzählungszeichens außerhalb an. In einigen Browsern kann es jedoch zu Anzeigeproblemen kommen, die auf der Art und Weise beruhen, wie der Browser Ihre Website gestaltet.

So zeigen Sie es im folgenden Format an:

A B
C D
E

usw. Verwenden Sie Folgendes:

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

Dies sollte alle Ihre Probleme mit der Anzeige von Spalten lösen. Alles Gute und danke @jaider, da Ihre Antwort mir geholfen hat, dies zu entdecken.

Ich habe versucht, dies als Kommentar zu veröffentlichen, konnte jedoch die Spalten nicht richtig anzeigen (gemäß Ihrer Frage).

Sie fragen nach:

AB

CD

E.

... aber die als Lösung akzeptierte Antwort wird zurückkehren:

ANZEIGE

SEIN

C.

... also ist entweder die Antwort falsch oder die Frage ist.

Eine sehr einfache Lösung wäre, <ul>die Breite Ihrer <li>Artikel einzustellen und dann zu schweben und die Breite Ihrer Artikel so einzustellen

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

Beispiel hier http://jsfiddle.net/Jayx/Qbz9S/1/

Wenn Ihre Frage falsch ist, gelten die vorherigen Antworten (mit einem JS-Fix für mangelnde IE-Unterstützung).

Ich mag die Lösung für moderne Browser, aber die Aufzählungszeichen fehlen, deshalb füge ich einen kleinen Trick hinzu:

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

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


li:before {
  content: "• ";
}

Hier ist eine mögliche Lösung:

Snippet:

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>

Und es ist geschafft.
Verwenden Sie für 3 Spalten die liBreite 33%, für 4 Spalten 25% usw.

Dies ist der einfachste Weg, dies zu tun. Nur CSS.

1. füge dem ul-Element eine Breite hinzu.
2. Anzeige hinzufügen: Inline-Block und Breite der neuen Spalte (sollte weniger als die Hälfte der ul-Breite betragen).

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>

Sie können CSS nur verwenden , um zwei oder mehr Spalten festzulegen

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

Dies kann mithilfe der CSS-Eigenschaft für die Spaltenanzahl auf dem übergeordneten div erreicht werden.

mögen

 column-count:2;

Überprüfen Sie dies für weitere Details.

So wird eine schwebende DIV-Liste in Spalten und nicht in Zeilen angezeigt

Sie können dies ganz einfach mit dem jQuery-Columns-Plugin tun, um beispielsweise eine ul mit einer Klasse von .mylist zu teilen, die Sie tun würden

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

Hier ist ein Live-Beispiel zu jsfiddle

Das gefällt mir besser als mit CSS, weil mit der CSS-Lösung nicht alles vertikal nach oben ausgerichtet ist.

mehr eine Antwort nach ein paar Jahren!

in diesem Artikel: 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%; }

In updateColumns()Not, if (column >= columns.length)anstatt if (column > columns.length)alle Elemente aufzulisten (C wird zum Beispiel übersprungen), also:

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/

Mit Bootstrap ... Diese Antwort ( https://stackoverflow.com/a/23005046/1128742 ) hat mich auf diese Lösung hingewiesen:

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

Die Legacy-Lösung in der oberen Antwort hat bei mir nicht funktioniert, da ich mehrere Listen auf der Seite beeinflussen wollte und die Antwort eine einzelne Liste voraussetzt und ein gutes Stück globalen Status verwendet. In diesem Fall wollte ich jede Liste in einem ändern <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]);
    }
});

Obwohl ich Gabriels Antwort auf die Arbeit bis zu einem gewissen Grad gefunden habe, habe ich beim Versuch, die Liste vertikal zu ordnen (erste ul AD und zweite ul EG), Folgendes gefunden:

• Wenn die Ul eine gerade Anzahl von Li's hatte, verteilte sie sie nicht gleichmäßig über die Ul's
• Die Verwendung der Datenspalte in der ul schien nicht sehr gut zu funktionieren, ich musste 4 für 3 Spalten setzen und selbst dann verteilte sie die Li nur noch in 2 der von der JS erzeugten ul

Ich habe die JQuery überarbeitet, damit das oben Genannte hoffentlich nicht passiert.

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

Dies war eine perfekte Lösung für mich, seit Jahren:

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