css - justificar - Separadores de texto para elementos LI

justificar texto en html css

Question

Me gustaría agregar barras diagonales (''/'') entre mis elementos li, pero no estoy seguro de cuál es la mejor forma de hacerlo de forma semántica. En este momento, simplemente estoy incluyendo la barra diagonal hacia adelante en la etiqueta li y agregando espacios con espacios que no se rompen, como:

<ul id="footer_menu">
<li>Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
<li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
<li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
<li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
<li>Contact</li>
</ul>

¿Qué piensas? Gracias.

Answer 1

¿por qué no agrega un li entre cada texto que contiene li con el / y agrega css a ese li para proporcionar espaciado?

<ul id="footer_menu">
<li>Customer Support</li>
<li class=''spacer''>/</li>
<li>Shipping Info</li>
<li class=''spacer''>/</li>
<li>Size Charts</li>
<li class=''spacer''>/</li>
<li>Privacy Policy</li>
<li class=''spacer''>/</li>
<li>Contact</li>
</ul>
<style>
.spacer{width:20px;}
</style>

No es un marcado válido agregar elementos que no sean <LI> en un <ul> . O eso o utilizar otro tipo de elemento html como <p> o <divs>

Answer 2

Esta es mi solución para el elemento LI separado por | (tubo):

li + li:before {
content: " | ";
}

El combinador de adyacencia (un signo más, +) es muy útil en este caso. Le permite aplicar un estilo a un elemento si ha sido precedido directamente por otro elemento especificado. Dado que el primer li no está precedido por otro li, no tendrá el contenido precedido. Esto es mucho menos que escribir

li:before {
content: " | ";
}
li:first-child:before {
content: "";
}

Answer 3

Para aquellos que usan Sass , he escrito un mixin para este propósito:

@mixin addSeparator($element, $separator, $padding) {
#{$element+''+''+$element}:before {
content: $separator;
padding: 0 $padding;
}
}

Ejemplo:

@include addSeparator(''li'', ''|'', 1em);

Lo que te dará esto:

li+li:before {
content: "|";
padding: 0 1em;
}

Answer 4

Podrías poner el contenido de li en un lapso y luego usar CSS:

ul#footer_menu li span:after { content:"/"; padding:0 5px; }

O algo similar.

edita Ah, como dijo Kyle, pero la adición de la regla last_child es más completa.

Answer 5

Puede usar pseudo-elementos para incluir texto después de un elemento y puede usar los selectores de CSS3 para eliminar la barra diagonal final del último elemento.

#footer_menu li:after {
content: "/";
}
#footer_menu li:last-child:after {
content: "";
}

EDITAR:

Todo se puede hacer en una sola línea con mejor CSS3.

#footer_menu li:nth-child(n+2):before {
content: "/";
}

EDITAR: EDITAR:

Es incluso más fácil que eso.

#footer_menu li + li:before {
content: "/";
}

Answer 6

Si está intentando hacer algo como Asistencia al cliente / Información de envío / Tablas de tallas / Política de privacidad / Contacto, puede hacerlo con algo de CSS

Tendrá que agregar la "primera" clase al primer li en su conjunto como el siguiente

<ul id="footer_menu">
<li class="first">Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
<li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
<li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
<li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
<li>Contact</li>
</ul>

Y luego el siguiente CSS

 #footer_menu ul {
float: left;
padding: 10px;
list-style: none outside none;
}
#footer_menu li {
border-left: 2px solid #000000;
float: left;
padding: 0 10px;
}
#footer_menu li.first {
border: none;
}

Esto pondrá todos los elementos li uno al lado del otro y le dará un borde. El resultado se verá algo así como

Atención al cliente | Información de envío | Tablas de tallas | Política de privacidad | Contacto