Bullet Points定位与阿拉伯语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; 我无法获得右侧的所有项目符号。有些比其他更缩进。

Please see a screenshot showing the problem.

有关如何简单地对齐右边所有项目符号点的任何建议吗？

更新：请参阅此屏幕截图， 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放在li里面的一个子div上，但我认为这对阿拉伯语来说有点奇怪。

Answer 2

我有同样的问题并通过使用：

克服了它

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

功能属性正在使用：margin-right:20px while using direction :rtl

由于

Answer 3

一种解决方案可能是将背景位置设置为：  background-position：100％6px！important;

我认为方向：rtl，不影响背景。

Answer 4

尝试在句子开头使用•，同时将所有内容对齐。这样你可以得到这样的东西：

مرحبا•

Answer 5

在css样式和你的rtl文件中尝试:: before和:: after并使用JavaScript来释放css效果。

示例：

this is (RTL list but bullets are not suitable

以下是RTL之前的Css代码。

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

我希望这有助于注意这是我在堆栈中的第一个评论！

Answer 6

尝试background-position：right;

为我工作。