Estilo de CSS para la lista horizontal con viñeta solo entre elementos

No estoy seguro de cómo crear una lista horizontal que se vea así:

Lista centrada con viñetas entre los elementos

Estas son las reglas:

  • Hay una cantidad ilimitada de elementos en la lista.
  • Cada elemento debe estar en una sola línea y no debe ajustarse a una segunda línea.
  • Varios elementos pueden estar en una sola línea si hay espacio para que quepan
  • Si hay varios elementos en una sola línea, deben estar separados por un divisor
  • El divisor parece una bala, pero podría ser una imagen
  • Necesito que funcione en navegadores modernos, así como en IE8 +

Lo que no estoy seguro de cómo hacer es hacer que las viñetas aparezcan solo entre los ítems, y no antes ni después de cada fila de ítems.

Aquí hay una versión mejorada. Seguí obteniendo una incoherencia en ciertos anchos de página donde faltarían dos viñetas en lugar de solo la última. es decir

link1 · link2 · link3 link4

link5 · link6

Creo que el problema era que eliminar el último separador de viñetas podría afectar el flujo de texto si el ancho de la página era el correcto. La nueva secuencia de comandos bloquea el flujo de texto original mediante la adición y eliminación de saltos de línea literales.

Tengo el mismo script para ejecutar cada vez que se cambia el tamaño de la pantalla para que no se quede atascado con saltos de línea incómodos.

      

Para aquellos de ustedes que no tienen que preocuparse por IE8, esto es tan simple como:

 ul li { list-style: none; display: inline; } ul li:after { content: " \00b7"; } ul li:last-child:after { content: none; } 

Esta solución coincide con todos los requisitos de OP, excepto la compatibilidad con IE8 (que fue 2013).

Marcado simple. Sin JavaScript No :last-child

Enlace a CodePen

  ul { display:inline-block; padding:0; text-align:center } li { display:inline } li a { white-space:nowrap } li:after { content:" "; letter-spacing:1em; background:center center no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=); } 

enter image description here

Para casi todos los navegadores , puede usar el selector CSS3 last-child lugar de JavaScript:

 ul li { display: inline; white-space: pre; } ul li:after { content: " \00b7 "; } ul li:last-child:after { content: ""; } 

El white-space: pre deja de envolver los elementos de la lista (porque generalmente quiere que se ajuste entre los elementos de la lista), y es un truco que le permite boost el espacio entre los elementos de la lista al agregar espacios en la segunda línea.

u00b7 ⋅ ( MIDDLE DOT ) es el caracter Unicode estándar para interpuncts, pero también puede usar u2022 • ( BULLET ), u2b24 ⬤ ( BLACK LARGE CIRCLE ), U+2043 ⁃ (HYPHEN HYPHEN BULLET ), o cualquier otro carácter unicode que elija.

Tenga en cuenta que algunos caracteres pueden no ser compatibles con todos los sistemas.

Si no le importa crear una imagen PNG (con fondo transparente) de la viñeta (u otro separador), entonces puede usar un espacio natural entre los elementos de la lista pintados con este como fondo.

Cuando los elementos de la lista se envuelven en la siguiente línea, el espacio — y por lo tanto su fondo — no se representará.

Esto evita problemas de diseño relacionados con el espacio ocupado por el separador, así como evitar cualquier Javascript / jQuery, aprovechando el propio motor de diseño del navegador para hacer el trabajo. Puede ajustar el espacio para el separador con el atributo espaciado de palabras.

Deberá asegurarse de que no haya otros espacios en blanco dentro del marcado que de otro modo podrían usarse como espacio natural. Puede usar una imagen de mayor resolución que la de 5×5 aquí, junto con el fondo de pantalla, de modo que todavía se vea bien cuando esté en zoológico, pero tenga en cuenta que IE8 no admite la escala de las imágenes de fondo. El otro inconveniente es que si quieres cambiar el color, tendrás que editar el PNG.

VIOLÍN

Código basado en la modificación de la respuesta de @ bleuscyther:

CSS:

 ul { max-width: 700px; padding: 0; text-align: center; } ul li { display: inline; white-space: nowrap; } ul .separator { word-spacing: 1.1em; background-repeat: no-repeat; background-position: 50% 60%; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=); } 

HTML:

  

La solución de user2511031 es casi ideal … simplemente no es un HTML válido. No debería haber ningún SPAN fuera de LI, dentro de UL.

Pero eso no significa que no haya una solución realmente ideal. ¡Encontré uno!

No es necesario poner los tramos por todos lados y limpiar los espacios en blanco en el marcado. Coloque el espacio necesario en el contenido de pseudo elemento “: after”, aplique la imagen de fondo a él.

¡Hace lo mismo!

 ul { max-width: 700px; padding: 0; text-align: center; } ul li { display: inline; white-space: nowrap; } ul li:after { content: " "; word-spacing: 2em; background-repeat: no-repeat; background-position: 50% 60%; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=); } 

Aquí está el violín

Utilicé la respuesta de JavaThunder y cambié el middot por una viñeta, que es un poco más grande, usando este código en su lugar:

 ul li:after { content: " \2022"; } 

De la manera más simple, todo lo que necesitaría es establecer text-align: center en el ul y display: inline-block en li en su hoja de estilo. Puede usar una imagen como separador si lo desea, aprovechando :after pseudo clase en li .

Aquí hay un ejemplo .

http://jsfiddle.net/caramba/tSnnP/

 
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx

Acabo de utilizar el texto-sangrado para diseñar con éxito una lista con viñetas de la siguiente manera:

HTML:

 
  • Payment
  • Check
  • Direct Deposit

CSS:

 ul.horizontal li { list-style-type:disc; float: left; text-indent:-4px; margin-right:16px; } 
  ul li { display: inline; text-align: center } .separator { display: inline-block; background-color: black; width: 5px; height: 5px; border-radius: 45px; vertical-align: middle; } 
 
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5

También puedes construir esto en JavaScript usando un bucle y concatenar un nuevo li para la cantidad x de elementos de la lista, pero dado que tu publicación no dice nada acerca de una lista generada dinámicamente, la dejaré así por ahora.

 
  • First menu item
  • Second menu item
  • Third menu item