2010-10-16 3 views
6

Я использую пользовательские точки на веб-сайте. Теперь этот сайт также будет доступен на арабском языке.Баллы Позиции с арабским руководством RTL

.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; Я не могу иметь все точки пули с правой стороны. Некоторые из них более отступы, чем другие.

Please see a screenshot showing the problem.

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

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

alt text

+0

Я не уверен, почему вы хотите указать направленность через CSS. Вы пытались присвоить атрибуту dir = "rtl" прилагаемому тегу (тот, который содержит ваш неупорядоченный список)? Я думаю, что это может решить вашу проблему ... –

ответ

9

Есть ли причина, почему не просто 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, но это выглядело бы немного странно для арабского, я думаю.

+0

Отличный ответ, я не знал, что вы можете использовать стиль списка с пользовательскими изображениями. Спасибо! Работает отлично! – Julian

1

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

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

-1

Попробуйте положение фона: вправо;

Работал для меня.

2

У меня была такая же проблема, и получил за это с помощью:

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

Атрибут функционирующий использует: margin-right:20px while using direction :rtl

Благодарности

1

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

مرحبا •

0

Try :: до и после :: в CSS стиля и файл РТЛ и освободить CSS эффект использования JavaScript.

Пример:

this is (RTL list but bullets are not suitable

Здесь вы 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: this is (after) rtl css style

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

Смежные вопросы