css - linea - Separadores para navegación

separador vertical css

Question

Necesito agregar separadores entre elementos de navegación. Los separadores son imágenes.

Mi estructura HTML es como: ol> li> a> img .

Aquí encuentro dos posibles soluciones:

1. Para agregar más etiquetas li para la separación (boo!),
2. Incluya el separador en la imagen de cada elemento (esto es mejor, pero hace posible que el usuario haga clic en, por ejemplo, "Inicio", pero acceda a "Servicios", ya que están uno detrás del otro y el usuario puede hacer clic accidentalmente en el separador pertenece a "Servicios");

¿Qué hacer?

Answer 1

Agregue el separador al fondo li y asegúrese de que el enlace no se expanda para cubrir el separador, lo que significa que el separador no podrá hacer clic.

Answer 2

Creo que la mejor solución para esto es lo que uso, y ese es un borde css natural:

border-right:1px solid;

Es posible que deba ocuparse de relleno como:

padding-left: 5px;
padding-right: 5px;

Finalmente, si no quieres que el último li tenga ese borde separado, dale a su último hijo "ninguno" en "borde-derecha" de esta manera:

li:last-child{
  border-right:none;
}

Buena suerte :)

Answer 3

La otra solución está bien, pero no es necesario agregar separador al último si se usa : después o al principio si se usa : antes .

ASI QUE:

caso: después

.link:after {
  content: ''|'';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '''';
}

estuche: antes

.link:before {
  content: ''|'';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '''';
}

Answer 4

Póngalo como fondo en el elemento de la lista:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

A continuación, recomiendo un marcado diferente para la accesibilidad:
En lugar de incrustar las imágenes en línea, coloque el texto como texto, rodee cada una de ellas con un lapso, aplique la imagen como fondo y luego oculte el texto con la pantalla: ninguna; esto brinda mucha más flexibilidad de estilo y le permite utilice el mosaico con una imagen de 1px de ancho en bg, ahorra ancho de banda, y puede incrustarlo en un sprite de CSS, lo que ahorra llamadas HTTP:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

ACTUALIZAR Bien, veo que otros obtuvieron una respuesta similar antes que yo, y noté que John también incluye un medio para evitar que el separador aparezca antes del primer elemento, usando el selector li + li, lo que significa que cualquier li viene después de otro li.

Answer 5

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 cual te dará esto:

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

Answer 6

Para obtener el separador centrado verticalmente en relación con el texto del menú,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

Answer 7

Puedes agregar un elemento li donde quieras agregar divisor

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

En CSS puedes agregar el siguiente código.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Esto aumentará la velocidad de ejecución ya que no cargará ninguna imagen. solo pruébalo ... :)

Answer 8

Si no hay una necesidad urgente de usar imágenes para los separadores, puede hacerlo con CSS puro.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

Esto pone una barra entre cada elemento de la lista, tal como se describe en la pregunta original. Pero como usamos los selectores adyacentes , no coloca la barra antes del primer elemento. Y como usamos el pseudo selector :before , no pone uno al final.

Answer 9

Simplemente use la imagen del separador como imagen de fondo en el li .

Para que aparezca solo entre los elementos de la lista, coloque la imagen a la izquierda de la li , pero no en la primera.

Por ejemplo:

#nav li + li {
    background:url(''seperator.gif'') no-repeat top left;
    padding-left: 10px
}

Este CSS agrega la imagen a cada elemento de la lista que sigue a otro elemento de la lista; en otras palabras, todos menos el primero.

NÓTESE BIEN. Tenga en cuenta que el selector adyacente (li + li) no funciona en IE6, por lo que tendrá que agregar la imagen de fondo al li convencional (con una hoja de estilo condicional) y quizás aplicar un margen negativo a uno de los bordes.