Puntos de bala Posicionamiento con dirección RTL árabe

Estoy usando puntos de viñetas personalizados en un sitio web. Ahora este sitio también estará disponible en árabe.Puntos de bala Posicionamiento con dirección RTL árabe

.post ul li{ 
    color: #555555; 
    background: url(images/ico-bullet_round.gif) no-repeat !important; 
    background-position: 300px 6px !important; 
    padding-right: 15px !important; 
    padding-left:0 !important; 
    direction:rtl; 
}

Sin embargo, con dirección: RTL; No puedo tener todas las viñetas en el lado derecho. Algunos tienen más sangría que otros.

Please see a screenshot showing the problem.

¿Alguna sugerencia sobre cómo simplemente alinear todos los puntos de la bala de la derecha?

ACTUALIZACIÓN: Consulte esta captura de pantalla con posición de fondo establecida en 0 6px. Tiene algo que ver con dirección: rtl; pero no puedo resolverlo.

alt text

Fuente

2010-10-16 Julian

No estoy seguro de por qué quiere especificar la direccionalidad a través de CSS. ¿Ha intentado asignar el atributo dir = "rtl" a la etiqueta adjunta (la que contiene su lista desordenada)? Creo que podría resolver su problema ... –

¿Hay alguna razón por la cual no simplemente list-style-image, que está diseñado específicamente para viñetas personalizadas?

ul { margin: 0 20px; padding: 0; } 
ul li { 
    margin: 0; padding: 0; 
    list-style: disc url(images/ico-bullet_round.gif); 
    direction:rtl; 
}

funciona para mí, suponiendo que decir el lado derecho cuando se dice “lado derecho”. Podrías tenerlos a la izquierda también si quisieras poner el rtl en un div infantil dentro del li, pero parecería un poco extraño para el árabe, creo.

Fuente

2010-10-16 20:59:42 bobince

Excelente respuesta, no sabía que podía usar el estilo de lista con imágenes personalizadas. ¡Gracias! ¡Funciona bien! – Julian

Una solución podría ser colocar una posición de fondo como esta: background-position: 100% 6px! Important;

Supongo que la dirección: rtl, no influye en los fondos.

Fuente

2010-10-16 21:03:47 netadictos

-1

Pruebe background-position: right;

Funcionó para mí.

Fuente

2014-01-06 06:50:23

que tenían el mismo problema y lo superó mediante el uso de:

ul{direction:rtl;} 
li{direction:rtl; margin-right:20px;}

El atributo de funcionamiento está utilizando: margin-right:20px while using direction :rtl

Gracias

Fuente

2014-02-22 09:13:12 mohammad

Tratando usando • al comienzo de la oración, mientras alineando todo a la derecha. De esa manera usted puede obtener algo como esto:

مرحبا •

Fuente

2016-01-23 22:40:06 Anya

Try :: antes y un después en el estilo :: CSS y el archivo de RTL y el uso de JavaScript para liberar efecto css.

Ejemplo:

this is (RTL list but bullets are not suitable

Éstos son que el código CSS para antes de RTL.

ul.points li:before{content:"\f0c8";font-family:fontawesome;color:#135588;margin-right:7px;font-size:.75em}

A continuación, después de que hice archivo RTL He utilizado este código:

ul.points li:after{content:"\f0c8";font-family:fontawesome;color:#135588;margin-right:7px;font-size:.75em}

sino buscar esta imagen (tiene balas antes y después (de ahí su turno para eliminarlo mediante javascript (agregar clase y eliminar clase) a Css: this is (after) rtl css style

¡Deseo que esto ayude al notar que es mi primer comentario en la pila!

Fuente

2017-08-19 14:10:14

Puntos de bala Posicionamiento con dirección RTL árabe

Respuesta

Cuestiones relacionadas