Listas ul CSS

Listas ul CSS

Esta regla CSS, es buena practica para ordenar los elementos de una lista. que de existir un nuevo item le da las propiedades que lo separa del anterior.

Este snippet, es un buen truco para ordenar perfectamente el diseño de nuestra lista o ul CSS. Todos sabemos que una ul, entre varias opciones, contiene uno o mas elementos que por ejemplo pueden ser li, siendo este el que utilizaremos para nuestro snippet. Con esta regla añadiremos propiedades si nuestra ul contiene mas de un elemento y todos esos elementos a mayores se les aplicarán las propiedades que contiene la clase.

Para explicar este snippet utilizamos una lista ul con elementos li, pero se puede utilizar para todos los casos que puedan parecerse.

Entremos en detalles, supongamos que tenemos un array dinámico por ejemplo, un menú cualquiera y por medio de un bucle obtendremos todos los elementos sin saber cuales son y cuantos serán en número.

Las listas serian algo como esto, presentamos dos casos una horizontal y otra vertical.

HTML – ul horizontal


<ul class="ul-horizontal">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

HTML – ul vertical


<ul class="ul-vertical">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Las clases que vemos debajo. Sus propiedades dan estilos diferentes, según el alienado elegido de los elementos, horizontal o vertical, dentro de nuestra ul.

Podemos ver el selector li+li, con esto conseguimos añadir propiedades por igual a todos los elementos que componen nuestra ul, menos al primero. Por eso el más, como operador, que figura entre los dos li, si existe le aplica las propiedades.

CSS – ul horizontal


.ul-horizontal {
  list-style: none;
  margin: 0;
  padding: 8px;
  background-color: #bbb;
  display: inline-block;
}
.ul-horizontal li {
  float: left;
  background-color: #777;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid #666;
}
.ul-horizontal li+li {
  margin-left: 8px;
}

CSS – ul vertical


.ul-vertical {
  list-style: none;
  margin: 0;
  padding: 8px;
  background-color: #bbb;
  display: inline-block;
}
.ul-vertical li {
  background-color: #777;
  width: 150px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid #666;
}
.ul-vertical li+li {
  margin-top: 8px;
}

Se puede ver como funciona el ejemplo en CodePen.

See the Pen Lista ul CSS Horizontal by Smoothemes (@smoothemes) on CodePen.0

Se puede ver como funciona el ejemplo en CodePen.

See the Pen Lista ul CSS Vertical by Smoothemes (@smoothemes) on CodePen.0

Descargate este snippet, pulsa en el botón.

Compartir