Html 将项目符号点向右而不是向左对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21058885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align bullet points to the right instead of left
提问by Anthony
I have bullet points that are aligned right and I would like the bullet points to appear on the right instead of left.
我有右对齐的项目符号点，我希望项目符号点出现在右侧而不是左侧。
I'm using bullet points because I will replace the bullet with an arrow the points to a URL and use it for navigation.
我使用项目符号是因为我将用指向 URL 的箭头替换项目符号并将其用于导航。
How do I do this?
我该怎么做呢？
This is the code that i'm using for the navigation in the header:
这是我用于标题中导航的代码：
.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;
}
and the html
和 html
<right>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Jewel Thieves</a></li>
<li><a href="">Community</a></li>
</ul>
</right>
If I use direction rtl, the bullets dissapeared.
如果我使用方向 rtl，子弹就会消失。
回答by Exlord
you can use direction:rtl;css property
您可以使用direction:rtl;css 属性
or dir="rtl"html attribute
或dir="rtl"html 属性
回答by Sajad Karuthedath
回答by Jukka K. Korpela
Setting direction: rtlon the list element would put the bullets on the right, but this is fragile, since the setting also sets the overall writing direction. This means that e.g. “foo (bar)” will be displayed as “(foo (bar”, as per the Unicode bidirectional algorithm.
direction: rtl在列表元素上设置会将项目符号放在右侧，但这很脆弱，因为该设置还设置了整体写作方向。这意味着，例如“foo (bar)”将显示为“(foo (bar)”，根据 Unicode 双向算法。
To deal with this, you need to set the direction to left-to-right inside the list items. In the special case that you might have here, each licontains just an aelement and nothing more. Then the following would work:
为了解决这个问题，您需要在列表项内将方向设置为从左到右。在您可能遇到的特殊情况下，每个li都只包含一个a元素，仅此而已。那么以下将起作用：
<style>
ul { direction: rtl; }
ul li a { direction: ltr; unicode-bidi: embed; }
</style>
However, this is probably too tricky. It is better to append the list markers (bullets, arrows, whatever) as characters or as images, possibly with CSS, to the list items and omit browser-generated list markers. The details depend on the specifics and context of the original problem.
然而，这可能太棘手了。最好将列表标记（项目符号、箭头等）作为字符或图像（可能使用 CSS）附加到列表项并省略浏览器生成的列表标记。细节取决于原始问题的细节和上下文。
回答by mplungjan
Works for me
为我工作
ul {
direction:rtl;
list-style-image:url(http://australianetwork.com/img/icon_arrow_left_black.png);
}
Using simple and valid - note the entity ‎on the right bracket and questionmark
使用简单有效 - 注意‎右括号和问号上的实体
<ul>
<li><a href="">Home (on the range)‎ </a></li>
<li><a href="">Jewel Thieves</a></li>
<li><a href="">Community</a></li>
<li><a href="...">foo?‎</a></li>
</ul>
回答by Dipak
<!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>
It will work for you
它会为你工作
