JMiur [E]

Esta es una solución sencilla a un problema común.

Tengo una lista cualquiera y quiero ponerle un borde o separador a cada uno de los items que la componen:
<div id="demobordes">
  <ul>
    <li>el primer item</li>
    <li>el segundo item</li>
    <li>el tercer item</li>
    <li>el último item</li>
</ul>
Entonces pruebo con una regla básica:
<style>
#demobordes li {
  background-color: #000;
  border-bottom: 2px dotted #ABC;
  border-top: 2px dotted #ABC;
  color: #888;
  padding: 5px 10px;
}
</style>
pero ... el primero se ve bien, el último también y los del medio se superponen, haciéndolos mas "gordos":

  • el primer item
  • el segundo item
  • el tercer item
  • el último item

Entonces, pruebo, sólo dejo un borde, el de abajo o el de arriba pero, en ambos casos siempre me falta uno; o el primer item no tiene un borde superior o le falta el borde al último y yo quiero que todos tengan un borde:

  • el primer item
  • el segundo item
  • el tercer item
  • el último item
  • el primer item
  • el segundo item
  • el tercer item
  • el último item

Y como el navegador no es adivino, lo que debo hacer es indicarle eso, si todos los items tienen un borde inferior (border-bottom) quiero que el primero tenga un borde superior y para eso, uso first-child:
#demobordes li {
  .......
  border-bottom: 2px dotted #ABC;
}
#demobordes li:first-child { border-top: 2px dotted #ABC; }
Y al revés, si todos tienen un borde superior (border-top) le digo que el último tenga un borde inferior con last-child:
#demobordes li {
  .......
  border-top: 2px dotted #ABC;
}
#demobordes li:last-child { border-bottom: 2px dotted #ABC; }
Y con eso resuelvo el asunto:

  • el primer item
  • el segundo item
  • el tercer item
  • el último item
  • el primer item
  • el segundo item
  • el tercer item
  • el último item

3 comentarios:

Rosendo Ramírez Aquino  

Muy buen dato muchas gracias! :D

Responder
Gem@  

Siempre llega ese momento que todos nos volvemos locos para añadir ese borde superior. Muy útil :)

Responder
Eloy Chavez  

No me he visto aun en la necesidad de colocar bordes pero es un muy buen dato que tendre a la mano, gracias :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR