Horizontal mélangé Un CSS vertical avec

Question

J'essaie de créer un menu avec des objets horizontaux mixtes.Voilà comment le menu devrait ressembler:

élément 1 élément 3 élément 5 article 7
Point 2 Point 4 Point 6 Point 8

Qu'est-ce que j'ai essayé IST le HTML suivant:

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

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

Mais cela ne fonctionne pas, je pense que c'est trop pour CSS :)

Quelqu'un a eu une idée?Merci d'avance pour toute aide!

salutations est ro

Answer 1

garder les éléments étranges flottants à gauche.

Faites que les éléments paires n'ont pas de largeur (marge-droit: -115px) et positionnez-les 155 px à gauche et à la distance de paisses vers le bas:

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

Ce que vous pourriez faire est de définir les éléments de menu sur

width:25%;

sur chacun de vos éléments de menu, puis les flotter à gauche.Vous pouvez vous débarrasser de tout le reste.Également comme un côté n'utilise pas la balise de menu est-elle obsolète.:)

jsfiddle

http://jsfiddle.net/eerr7/

violon mis à jour

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

Answer 3

Peut-être quelque chose comme ça?C'est un peu rouillé, mais mon ajustement de ce que vous voulez.

J'ai ajouté une partie des et modifiées un peu

.navigation menu li:nth-child(6) {
    float: none;
}

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