Composizione orizzontale misti Un CSS verticale con

Question

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

Answer 1

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

.

Fiddle

Answer 2

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

http://jsfiddle.net/eerr7/

Aggiornato Fiddle

http://jsfiddle.net/eerr7/2/

Answer 3

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

.

http://jsfiddle.net/jxxu8/2/