Question

我有正确对齐的子弹点，我希望子弹点出现在右边而不是左边。

我正在使用项目符号，因为我会用箭头将子弹替换为URL并将其用于导航。

我该怎么做？

这是我用于标题导航的代码：

.header right {
padding-top: 8px;
float: right;
text-align: right;
}
.header right ul
{
margin:0;
padding:0;
}
.header right a
{
display:block;
color: black;
text-decoration: none;
}

和html

<right>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Jewel Thieves</a></li>
<li><a href="">Community</a></li>
</ul>
</right>

如果我使用方向rtl，子弹消失了。

Answer 1

您可以使用direction:rtl; css属性

或dir="rtl" html属性

Answer 2

试试这个

DEMO

MARK UP：

<div dir="rtl">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Jewel Thieves</a></li>
<li><a href="#contact">Community</a></li>
</ul>
</div>

Answer 3

在列表元素上设置direction: rtl会将项目符号放在右侧，但这很脆弱，因为该设置还设置了整体书写方向。这意味着，例如“foo（bar）”将显示为“（foo（bar”，根据Unicode双向算法。

要处理此问题，您需要在列表项内设置从左到右的方向。在您可能遇到的特殊情况下，每个li只包含一个a元素，仅此而已。然后以下工作：

<style>
ul { direction: rtl; }
ul li a { direction: ltr; unicode-bidi: embed; }
</style>

然而，这可能太棘手了。最好将列表标记（项目符号，箭头，等等）作为字符或图像（可能使用CSS）附加到列表项中，并省略浏览器生成的列表标记。细节取决于原始问题的具体情况和背景。

Answer 4

为我工作

Live Demo

ul {
 direction:rtl;
 list-style-image:url(http://australianetwork.com/img/icon_arrow_left_black.png);   
}

使用简单有效 - 请注意右括号中的实体‎和问号

<ul>
  <li><a href="">Home (on the range)&#x200E; </a></li>
  <li><a href="">Jewel Thieves</a></li>
  <li><a href="">Community</a></li>
  <li><a href="...">foo?&#x200E;</a></li>
</ul>

Answer 5

 <!DOCTYPE html>
    <html>
    <body>

<ul dir="rtl">
    <li>Write this text right-to-left</li>
    <li>Write this text right-to-left</li>
    <li>Write this text right-to-left</li>
</ul>

    </body>
    </html>

它适用于你

将子弹点对齐而不是左对齐

5 个答案: