Mixta horizontal un CSS vertical con
-
26-12-2019 - |
Pregunta
Estoy tratando de crear un menú con elementos horizontales verticales mixtos.Así es como debería verse el menú:
Artículo 1 Artículo 3 Artículo 5 Artículo 7
Artículo 2 Artículo 4 Artículo 6 Artículo 8
Lo que intenté es el siguiente 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>
y 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;
}
Pero no funciona, creo, es demasiado para CSS :)
¿Alguien tiene una idea?¡Gracias de antemano por alguna ayuda!
saludos est ro
Solución
Mantenga los elementos impares que flotan a la izquierda.
Hacer que los elementos pares no tengan ningún ancho (margen derecho: -115px) y colóquelos 155 px a la izquierda y la distancia del abropiate a la parte inferior:
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;
}
Otros consejos
Lo que podría hacer es configurar los elementos del menú a
width:25%;
en cada uno de sus elementos de menú y luego solo flotanlos.Puedes deshacerme de todo lo demás.También como un lado, no use la etiqueta del menú está en desuso.:)
jsfiddle
Fiddle actualizado
tal vez algo como esto?Es un poco oxidado, pero mi ajuste lo que quieres.
Añadido algunos de los y cambiaron un poco
.navigation menu li:nth-child(6) {
float: none;
}