Composizione orizzontale misti Un CSS verticale con
-
26-12-2019 - |
Domanda
Sto cercando di creare un menu con verticale misto di oggetti orizzontali.È così che dovrebbe sembrare il menu:
.Articolo 1 Articolo 3 Articolo 5 Articolo 7
Articolo 2 Articolo 4 Articolo 6 Articolo 8
Cosa ho provato è il seguente html:
<menu>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
</menu>
.
e CSS:
.navigation menu {
float: right;
margin-top:103px;
width:683px;
}
.navigation menu li {
display:block;
width: 115px;
float: none;
background-image:none;
text-align:right;
}
.navigation menu li:nth-child(3) {
float: left;
}
.navigation menu li:nth-child(4) {
float: none;
}
.navigation menu li:nth-child(5) {
float: left;
}
.navigation menu li:nth-child(6) {
float: none;
}
.
Ma non funziona, penso, è troppo per CSS :)
Qualcuno ha avuto un'idea?Grazie in anticipo per qualsiasi aiuto!
Saluti EST RO
Soluzione
Tenere gli elementi dispari che fluttuano a sinistra.
Rendi gli elementi uniforme non hanno larghezza (margin-destra: -115px) e posizionarli 155 px a sinistra e la distanza a proposito verso il basso:
CSS
.menu {
float: left;
margin-top:13px;
width:683px;
}
.menu li {
display:block;
width: 115px;
float: left;
background-image:none;
text-align:right;
}
.menu li:nth-child(even) {
position: relative;
top: 1.2em;
left: -115px;
margin-right: -115px;
}
.
Altri suggerimenti
Cosa puoi fare è impostare le voci del menu su
width:25%;
.
Su ciascuna delle voci del menu e poi funziona a sinistra.Puoi sbarazzarti di tutto il resto.Anche come lato non utilizzare il tag menu è deprecato.:)
jsfiddle
Aggiornato Fiddle
Forse qualcosa del genere?È un po 'arrugginito ma il mio adattamento ciò che vuoi.
Ho aggiunto un po 'di e cambiato un po'
.navigation menu li:nth-child(6) {
float: none;
}
.