Come visualizzare un elenco in due righe?

Question

Ho un elenco di elementi che voglio per adattarsi in uno spazio che è costretto in verticale:

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
    <li>Six</li> 
</ul> 

Dato che io non voglio l'elenco per avere più di una determinata altezza, ma sono liberi di Expan orizzontalmente, voglio dividere la lista in colonne, in questo modo:

One Two  Three 
Four Five Six 

O, in alternativa (nel mio caso l'ordine non è importante)

One Three Five 
Two Four Six 

il La proprietà css column-count consente di suddividere un elenco in colonne, ma accetta solo un numero fisso di colonne. Non conosco il numero di elementi che ho intenzione di avere (può andare da 1 a più di 40), quindi se imposto il numero di colonne a 3, qualsiasi elenco con più di 6 elementi sarà troppo alto, e se ci sono solo 4 elementi, solo la prima colonna avrà due elementi e apparirà non uniforme.

Quindi, idealmente avrei bisogno di una proprietà row-count, ma non esiste. Credo di poterlo fare anche in Javascript, ma sto cercando una soluzione solo CSS.

Ho provato qualcosa: float:left su ogni li inserisce l'elenco in una riga. Per dividerlo in due righe, avrei bisogno di non applicare float:left all'elemento N/2. Non so come farlo.

so anche che posso farlo rompendo in più ul, ognuna con due li, e li float:left, ma vorrei evitare di rovinare il codice HTML per qualcosa di completamente di presentazione.

Qualcuno ha una soluzione per questo problema?

Modifica: Penso di non essere stato chiaro nello spiegare le mie esigenze. Voglio che l'elenco sia ordinato in colonne senza sapere quanti elementi ho intenzione di avere e in modo che avrò sempre due righe.

Così, per esempio, con 7 elementi, voglio avere:

One Two  Three Four 
Five Six  Seven 

E con 3 articoli:

One Two 
Three 

Answer 1

Ecco un modo semplice per farlo utilizzando jQuery. So che è stato detto che è necessario un modo CSS, ma questo è solo per riferimento futuro se qualcuno vuole fare riferimento a questa domanda.

Ottenere il numero di elementi LI e dividerlo per il numero di righe e impostare tale valore sulla proprietà di conteggio di colonne.

Jquery

$(document).ready(function() { 
var numitems = $("#myList li").length; 

$("ul#myList").css("column-count",Math.round(numitems/2)); 
}); 

CSS

ul { 
    width: 900px; 
} 
li { 
width: 75px; 
height: 75px; 
margin-top: 10px; 
margin-right: 10px; 
display: inline-block; 
} 

HTML

<ul id="myList"> 
<li>One</li> 
<li>Two</li> 
<li>Three</li> 
<li>Four</li> 
<li>Five</li> 
<li>Six</li> 
<li>Seven</li> 
<li>Eight</li> 
<li>Nine</li>  
</ul> 

Fiddle here

EDIT:

stessa implementazione utilizzando semplici javascript.

var ul = document.getElementById("myList"); 
var li = ul.getElementsByTagName("li"); 
var numItems = li.length; 

var css = document.createElement("style"); 
css.type = "text/css"; 
css.innerHTML = "ul { column-count: " + Math.round(numItems/2) + "; }"; 
document.body.appendChild(css); 

È necessario impostare la larghezza di UL, perché il numero di righe dipende dalla larghezza anche anche dopo aver impostato il column-count. Puoi impostarlo anche al 100%, ma il numero di righe cambierà in base alle dimensioni della finestra. Per limitare il numero di righe a 2, potrebbe essere richiesta una larghezza fissa per UL.

Answer 2

Perché non fare un max-width?

ul { 
    max-width: somevalue; // which would last when the third item ends 
} 

In alternativa, è possibile aggiungere classe a loro come

<ul> 
    <li class="one">One</li> 
    <li class="one">Two</li> 
    <li class="one">Three</li> 
    <li class="two">Four</li> 
    <li class="two">Five</li> 
    <li class="two">Six</li> 
</ul> 

Ora CSS come:

.one { 
    display: inline; 
} 

.two { 
    display: inline; 
} 

L'ultima cosa dell'imbottitura è

ul li { 
    padding: somevalue; 
} 

E per affettare:

ul { 
    max-width: 200px; // to break the list 
} 

La buona fortuna per te è che puoi prima controllare la larghezza della lista! Quindi suddividilo in due parti uguali usando JS e quindi applicandolo.

Se si desidera ottenere il calucator CSS, quindi utilizzare questo:

width: calc(var1 + var2); // calc will do the math.. 

Ecco il violino per questa situazione: http://jsfiddle.net/afzaal_ahmad_zeeshan/xN87Q/

Answer 3

Si potrebbe impostare il proprio li in larghezza 33% e galleggianti contro ogni altro, una volta che non c'è abbastanza spazio in una fila, verranno spinti verso il basso in file di 3 di uguale larghezza.

ul li{ 
    width: 33%; 
    float: left; 
} 

Answer 4

è possibile utilizzare

li:nth-child(even) 

li:nth-child(odd) 

http://jsfiddle.net/nCmZT/

Answer 5

Fonte: Creating a two column Unordered List

Fiddle: Demo provided in the link

HTML

01.235.

<ul class="two-col-special"> 
    <li>First Category</li> 
    <li>Second Category</li> 
    <li>Third Category</li> 
    <li>Fourth Category</li> 
    <li>Fifth Category</li> 
</ul> 

CSS

.two-col-special { 
    border: 1px dotted blue; 
    overflow: auto; 
    margin: 0; 
    padding: 0; 
} 

.two-col-special li { 
    display: inline-block; 
    width: 45%; 
    margin: 0; 
    padding: 0; 
    vertical-align: top; /* In case multi-word categories form two lines */ 
} 
.two-col-special li:before { 
    content: '+'; 
    padding: 5px; 
    margin-right: 5px; /* you can tweak the gap */ 
    color: orange; 
    background-color: white; /* in case you want a color... */ 
    display: inline-block; 
}