将项目符号点向右而不是向左对齐答案

【问题标题】：Align bullet points to the right instead of left将项目符号点向右而不是向左对齐
【发布时间】：2014-01-11 05:29:20
【问题描述】：

我有右对齐的项目符号点，我希望项目符号点出现在右侧而不是左侧。

我使用项目符号是因为我将用指向 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，子弹就会消失。

【问题讨论】：

也发布Html ..这样我们就可以做一个小提琴
@Anthony "如果我使用方向 rtl，子弹就会消失" ??不，他们没有。你可能有一些其他的 CSS 导致子弹消失

标签： html css

【解决方案1】：

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

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

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

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

【讨论】：

1+ 不错的收获，其他人都没有提到这一点。
ul li *{...} 更好
您只需要在最后一个括号后添加 LRM 字符。 HTML 实体：‎根据this
请举例说明列表项中正确对齐内容右侧的图像 - 我相信这不是微不足道的

【解决方案2】：

试试这个

DEMO

标记：

<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>

【讨论】：

div 容器和 CSS 声明块（在 JSFiddle 中）是不必要的。

【解决方案3】：

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

或dir="rtl"html 属性

【讨论】：

@Anthony 这非常有效。这没有问题，你标记了一个不存在 HTML 标签的答案是荒谬的
不健壮。例如，如果您有 <li><a href="...">foo?</a></li>，请检查会发生什么。
@JukkaK.Korpela 那么应该怎么做才能避免这种情况呢？？
@JukkaK.Korpela 什么不健壮？请详细说明
@AmarnathBalasubramanian <li><a href="...">foo?&#x200E;</a></li> 将起作用

【解决方案4】：

 <!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】：

为我工作

Live Demo

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

使用简单有效 - 注意右括号和问号上的实体&#x200E;

<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>

【讨论】：