Расположение маркеров в арабском RTL-направлении

Question

Я использую нестандартные маркеры на сайте.Теперь этот сайт также будет доступен на арабском языке.

.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;
}

Однако с направлением : rtl; Я не могу разместить все точки маркера на правой стороне.Некоторые из них более отступы, чем другие.

Пожалуйста, смотрите скриншот, показывающий проблему.

Любые предложения о том, как просто совместить все точки маркера справа?

ОБНОВЛЕНИЕ: Пожалуйста, смотрите этот скриншот с background-position , установленным в 0 6px.Это как-то связано с направлением : rtl; , но я не могу понять.

Answer 1

Есть ли причина, почему бы не просто list-style-image, который разработан специально для нестандартных пуль?

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

работает для меня, если вы подразумеваете правую сторону, когда говорите «правая сторона». Вы также можете иметь их слева, если хотите, поместив rtl на дочерний элемент div внутри li, но я думаю, что для арабского это выглядит немного странно.

Answer 2

У меня была та же проблема, и я справился с ней, используя:

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

Функциональный атрибут использует: margin-right:20px while using direction :rtl

Спасибо

Answer 3

Попытка использовать • в начале предложения, выравнивая все по правому краю. Таким образом, вы можете получить что-то вроде этого:

مرحبا & bull;

Answer 4

Одним из решений может быть размещение фоновой позиции следующим образом: background-position: 100% 6px! Важный;

Я полагаю, что направление: rtl не влияет на фон.

Answer 5

Попробуйте :: before и :: after в стиле css и вашем файле rtl и используйте JavaScript для освобождения эффекта css.

Пример:

это (список RTL, но пули не подходят

Вот код Css до RTL.

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

Затем, после того как я сделал RTL-файл, я использовал этот код:

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

но ищите это изображение (у него есть маркеры до и после (отсюда и ваша очередь удалить его с помощью javascript (добавить класс и удалить класс) в Css: это (после) стиль rtl css

Хотелось бы, чтобы это помогло отметить, что это мой первый комментарий в стеке!

Answer 6

Попробуйте background-position: right;

Сработало для меня.