Elenco Orizzontale con a capo

**world war** · 11-08-2015, 16:12

Buongiorno,
vorrei creare un elenco che si sviluppi in orizzontale e continui in una nuova linea se lo spazio non è sufficiente. Per fare questo utilizzo questo codice:

codice:

<html>
<div>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</div>
</html>

<style>
article {display:inline-block; width:33%;}
</style>

Con questo codice funziona tutto a dovere se imposto un altezza o se gli elementi contenuti sono tutti grandi uguali. Se questo non è possibile e gli elementi non hanno tutti la stessa altezza gli article si spostano a giro per la pagina.
Come posso aggirare questo problema?

Grazie

**carlomarangoni** · 11-08-2015, 16:23

Spiega meglio ciò che vuoi ottenere, perchè il tag <article> non è il più adatta ad ottenere un elenco orizzontale

**world war** · 11-08-2015, 17:13

Originariamente inviata da carlomarangoni

Spiega meglio ciò che vuoi ottenere, perchè il tag <article> non è il più adatta ad ottenere un elenco orizzontale

Per farla semplice, volevo fare una tabella senza dover inserire elementi particolari per ogni riga ma farla solo attraverso css.

Il problema principale però è che voglio specificare solo la larghezza e non l'altezza di un elemento.

**world war** · 11-08-2015, 17:29

Penso di aver trovato la soluzione utilizzando il float:left invece che il display:inline-block. In sostanza verrebbe così:

codice:

<html>
<head>

<style>
article {float:left; width:33%;}
</style>

</head>
<body>

<div>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</div>

</body>
</html>

**carlomarangoni** · 11-08-2015, 17:33

Si è ovvio che voleva utilizzato il float ma prima di dirtelo volevo farti capire che le liste vanni fatte con <ul><li></li></ul>

**world war** · 11-08-2015, 18:01

Originariamente inviata da carlomarangoni

Si è ovvio che voleva utilizzato il float ma prima di dirtelo volevo farti capire che le liste vanni fatte con <ul><li></li></ul>

Hai ragione, però nel mio caso ho preferito <article> per farmi dare dai motori di ricerca un maggior rilievo dei contenuti rispetto ad un <li>. Poi non so quanto effettivamente le cose siano così.
Poi se per motivi grafici dovrò creare più elementi per fare margini, padding, sfondi ecc sicuramente andrò a sostituire con un <li><article></article></li>

Discussione: Elenco Orizzontale con a capo

Strumenti discussione

Ricerca discussione

Visualizza

Elenco Orizzontale con a capo

Permessi di invio