Ho un elenco di elementi che voglio per adattarsi in uno spazio che è costretto in verticale:Come visualizzare un elenco in due righe?
<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
@JoshPowell: Ho discusso che: non conosco il numero di elementi che ho intenzione di avere, quindi 'count-column' mi farà avere più di due righe se ci sono 7 elementi o più. –
Ah, vedo che vedo, quindi vuoi una quantità infinita di righe per adattarsi al meglio al contenuto, giusto? –
Vedere la mia modifica: desidero sempre due righe e tutte le colonne necessarie. –