HTML - Poner lineas verticales en un menu horizontal

   
Vista:
Imágen de perfil de Paula

Poner lineas verticales en un menu horizontal

Publicado por Paula paula.sfc71@gmail.com (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:

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
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Poner lineas verticales en un menu horizontal

Publicado por xve (1178 intervenciones) el 29/10/2015 21:56:50
Hola Paula, una manera de eliminar siempre la ultima linea, es haciendo uso de last-child... algo así:
1
2
3
.caja2 > ul > li:last-child {
    border-right:0;
}

Esto te sirve?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar