Horizontal mélangé Un CSS vertical avec
-
26-12-2019 - |
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
La solution
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;
}
Autres conseils
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
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;
}