
Poner lineas verticales en un menu horizontal
Publicado por Paula (1 intervención) el 29/10/2015 14:41:45
Buenas, ando haciendo una copia de una pagina web para clase, y en la web sale un menu horizontal, el que podeis ver en la imagen adjunta con unas barras/lineas verticales que lo separan.
Mi idea en un principio era esta:
html:
css:
Pero veo el código demasiado sucio y feo, ademas de que en la linea de "Contacto" voy a tener que crear otra clase especifica para eliminar ese borde ya que en la imagen no se muestra. Hay alguna opcion que pueda permitir seguir con la lista y añadir las lineas verticales? O en otro caso quitar la lista pero que siga quedando horizonal
Mi idea en un principio era esta:
html:
1
2
3
4
5
6
7
8
9
<div class="caja2">
<ul>
<li>Animación </li>
<li>Decoración </li>
<li>Comestibles </li>
<li>Promociones </li>
<li>Contacto</li>
</ul>
</div>
css:
1
2
3
4
.caja2 > ul > li {
display:inline;
border-right: 2px solid #268EBF ;
}
Pero veo el código demasiado sucio y feo, ademas de que en la linea de "Contacto" voy a tener que crear otra clase especifica para eliminar ese borde ya que en la imagen no se muestra. Hay alguna opcion que pueda permitir seguir con la lista y añadir las lineas verticales? O en otro caso quitar la lista pero que siga quedando horizonal
- Captura.rar(179,9 KB)
Valora esta pregunta


0