2010-10-16 10 views
6

Używam niestandardowych punktorów na stronie internetowej. Ta strona będzie również dostępna w języku arabskim.Pozycjonowanie punktorów z arabskim kierunkiem 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; 
} 

Jednak z kierunek: rtl; Nie mogę mieć wszystkich punktów po prawej stronie. Niektóre są bardziej nacięte niż inne.

Please see a screenshot showing the problem.

Wszelkie sugestie, w jaki sposób po prostu wyrównać wszystkie wypunktowania po prawej stronie?

AKTUALIZACJA: Proszę zobaczyć ten zrzut ekranu z pozycja tła ustawiona na 0 6px. Ma to coś wspólnego z direction: rtl;, ale nie mogę tego rozgryźć.

alt text

+0

Nie wiem, dlaczego chcesz określić kierunkowość za pomocą CSS. Czy próbowałeś przypisać atrybut dir = "rtl" do otaczającego tagu (ten, który zawiera twoją nieuporządkowaną listę)? Myślę, że to może rozwiązać twój problem ... –

Odpowiedz

9

Czy istnieje jakikolwiek powód, dlaczego nie po prostu list-style-image, który został zaprojektowany specjalnie dla niestandardowych kul?

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

działa dla mnie, zakładając, że masz na myśli prawą stronę, kiedy mówisz "prawą stronę". Możesz mieć je również po lewej stronie, jeśli chcesz umieścić rtl na div dziecka w li, ale to wydaje się nieco dziwne dla języka arabskiego, tak myślę.

+0

Doskonała odpowiedź, nie wiedziałem, że możesz użyć stylu listy z niestandardowymi obrazami. Dziękuję Ci! Działa w porządku! – Julian

1

Jednym z rozwiązań może być ustawienie tła: pozycja tła: 100% 6px! Important;

Przypuszczam, że kierunek: rtl, nie ma wpływu na tła.

-1

Spróbuj ustawić tło: prawe;

Pracowałem dla mnie.

2

miałem ten sam problem i mam nad nim za pomocą:

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

funkcjonują atrybut używa: margin-right:20px while using direction :rtl

Dzięki

1

Próba korzystania • na początku zdania, natomiast wyrównanie wszystkiego na prawo. W ten sposób można dostać coś takiego:

مرحبا •

0

Try :: before i :: after CSS stylizacji i plik RTL i użyć JavaScript, aby zwolnić efekt css.

Przykład:

this is (RTL list but bullets are not suitable

Oto kod CSS dla was przed RTL.

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

Wtedy Po zrobiłem plik RTL użyłem tego kodu:

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

jednak spojrzeć na to zdjęcie (ma kul przed i po (stąd tury Aby usunąć go za pomocą javascript (dodaj klasę i usuń klasę) do Css: this is (after) rtl css style

Chciałbym, żeby to pomogło zauważyć, że to mój pierwszy komentarz w stosie!