Come visualizzare un elenco non ordinato in due colonne?

Con il seguente HTML, qual è il metodo più semplice per visualizzare l’elenco come due colonne?

  • A
  • B
  • C
  • D
  • E

Visualizzazione desiderata:

 AB CD E 

La soluzione deve essere in grado di funzionare su Internet Explorer.

Browser moderni

sfruttare il modulo colonne css3 per supportare ciò che stai cercando.

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 legacy

Sfortunatamente per il supporto di IE avrai bisogno di una soluzione di codice che coinvolga JavaScript e manipolazione dom. Ciò significa che ogni volta che il contenuto dell’elenco cambia, è necessario eseguire l’operazione per riordinare l’elenco in colonne e ristampare. La soluzione qui sotto utilizza jQuery per brevità.

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

HTML:

 
  • A
  • B
  • C
  • D
  • E
  • F
  • G

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

MODIFICARE:

Come indicato di seguito, questo ordinerà le colonne come segue:

 AE BF CG D 

mentre l'OP chiedeva una variante che corrispondesse a quanto segue:

 AB CD EF G 

Per realizzare la variante è sufficiente modificare il codice al seguente:

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

Stavo guardando la soluzione di @ jaider che ha funzionato, ma sto offrendo un approccio leggermente diverso che ritengo sia più facile da utilizzare e che ho visto essere valido nei vari browser.

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

Di default, l’elenco non ordinato mostra la posizione del proiettile all’esterno, ma in alcuni browser causerebbe alcuni problemi di visualizzazione in base al modo in cui il tuo sito web è stato progettato dal browser.

Per farlo visualizzare nel formato:

 AB CD E 

ecc. usa quanto segue:

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

Questo dovrebbe risolvere tutti i tuoi problemi con la visualizzazione delle colonne. Tutto il meglio e grazie a @jaider come la tua risposta mi ha aiutato a guidarmi per scoprirlo.

Ho provato a postare questo come commento, ma non ho potuto visualizzare le colonne correttamente (come da tua domanda).

Stai chiedendo:

AB

CD

E

… ma la risposta ha accettato poiché la soluzione tornerà:

ANNO DOMINI

ESSERE

C

… quindi la risposta è sbagliata o la domanda è.

Una soluzione molto semplice sarebbe quella di impostare la larghezza del tuo

    e quindi fluttuare e impostare la larghezza degli elementi

  • modo

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

    Esempio qui http://jsfiddle.net/Jayx/Qbz9S/1/

    Se la tua domanda è sbagliata, si applicano le risposte precedenti (con una correzione JS per mancanza di supporto IE).

    Mi piace la soluzione per i browser moderni, ma i proiettili mancano, quindi aggiungo un piccolo trucco:

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

     ul { list-style-type: none; columns: 2; -webkit-columns: 2; -moz-columns: 2; } li:before { content: "• "; } 

    inserisci la descrizione dell'immagine qui

    Ecco una ansible soluzione:

    Frammento:

     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%; } 
     
    • first
    • second
    • third
    • fourth

    Questo può essere ottenuto usando la proprietà css del conteggio delle colonne sul div genitore,

    piace

      column-count:2; 

    controllare questo per maggiori dettagli.

    Come rendere l’elenco DIV mobile visualizzato in colonne, non in righe

    Questo è il modo più semplice per farlo. Solo CSS

    1. aggiungi larghezza all’elemento ul.
    2. aggiungi display: blocco in linea e larghezza della nuova colonna (dovrebbe essere inferiore alla metà della larghezza).
     ul.list { width: 300px; } ul.list li{ display:inline-block; width: 100px; } 
     
    • A
    • B
    • C
    • D
    • E

    Puoi farlo molto facilmente con il plugin jQuery-Columns per esempio per dividere un ul con una class di .milista che dovresti fare

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

    Ecco un esempio dal vivo su jsfiddle

    Mi piace di più rispetto ai CSS perché con la soluzione CSS non tutto si allinea verticalmente verso l’alto.

    più una risposta dopo qualche anno!

    in questo articolo: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

    HTML:

     
    • CSS
    • XHTML
    • Semantics
    • Accessibility
    • Usability
    • Web Standards
    • PHP
    • Typography
    • Grids
    • CSS3
    • HTML5
    • UI

    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() necessario if (column >= columns.length) piuttosto che if (column > columns.length) per elencare tutti gli elementi (C è saltato per esempio) quindi:

     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/

    La soluzione legacy nella risposta principale non ha funzionato per me perché volevo influenzare più elenchi sulla pagina e la risposta presuppone un unico elenco più che utilizza un bel po ‘di stato globale. In questo caso ho voluto modificare ogni lista all’interno di una

    :

     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("
      "); } let lists = section.find("ul"); for (let i = 0; i < items.length; i++) { lists.get(i % columns).append(items[i]); } });

      Con Bootstrap … Questa risposta ( https://stackoverflow.com/a/23005046/1128742 ) mi ha indirizzato verso questa soluzione:

       
      • Item 1
      • Item 2
      • Item 3

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

      Questa è stata una soluzione perfetta per me, cercandola per anni:

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