Problema para dar espacio entre divs

[pzin]

Iniciado por willycarp

Código HTML:

<ul>
<li>inicio</li>
<li class="separador"> | </li>
<li>¿quienes somos</li>
<li class="separador"> | </li>
<li>nuestros productos</li>
<li class="separador"> | </li>
<li>contacto</li>
</ul>
 

Código con code o highlight. No es tan difícil.

Aunque no tenga nada que ver con la pregunta tu respuesta, te responderé a tu respuesta con otra respuesta que nada tiene que ver con la pregunta.

Eso de meter nuevos elementos para hacer de separadores, ya lo hemos superado. Pero ya que lo haces, no debería de ser un elemento de la lista. No es semántico. Y lo no semántico también se superó hace aún más tiempo. En caso de hacerlo así, casi que mejor usar un span dentro de li.

Pero ya digo, superamos el añadir elementos supérfluos, entonces nada mejor que usar pseudoelementos como ::before y ::after y pseudoclases del tipo :last-child.

Con lo que con un HTML así:

Código HTML:

<ul>
  <li></li>
  <li></li>
</ul>
 

Y un css así:

Código CSS:

li::after{
  content: "|";
}
 
li:last-child::after {
  content: none;
}
 

Obtenemos la misma cosa, semánticamente correcta y mucho más limpia y simplificada.