Html rtl中的HTML列表内容方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5244319/
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
HTML list content direction in rtl
提问by eagerMoose
I have a simple HTML unordered list
我有一个简单的 HTML 无序列表
<ul>
<li><a href="#">link1</a> <a href="#">link2</a> text1</li>
<li>text1 <a href="#">link</a></li>
<li>text1 text2</li>
</ul>
If I have normaln ltr layout, final content looks like this
如果我有 normaln ltr 布局，最终内容看起来像这样
link1 link2text1
text1 link
text1 text2
链接1链接2文本1
text1的链接
文本1文本2
However, if the content inside a list item is mixed, and direction is set to rtl, I get a complete mess
但是，如果列表项中的内容是混合的，并且方向设置为 rtl，我会变得一团糟
link2text1 link1
text1 link
text2 text1
链接2文本1 LINK1
text1的链接
文本2文本1
which means only the list element containing text only gets reversed properly. Any ideas on how to get this working correctly?
这意味着只有包含文本的列表元素才能正确反转。关于如何使其正常工作的任何想法？
edit: It seems that the content flow depends on the actual content. A simple example like this doesn't work
编辑：似乎内容流取决于实际内容。像这样的简单示例不起作用
<ul dir="rtl">
<li>
<a href="#">12:30 - 13:30</a>
some text
<a href="#">link text</a>
</li>
</ul>
<ul dir="ltr">
<li>
<a href="#">12:30 - 13:30</a>
some text
<a href="#">link text</a>
</li>
</ul>
回答by balexandre
It works out of the box
它开箱即用
The attribute dir="RTL"
属性 dir="RTL"
using your markup only position the content at the right side
使用您的标记仅将内容定位在右侧
<div dir="RTL">
<ul>
<li><a href="#">My Web Home Site</a> <a href="#">My Other Web Site</a> My First Text</li>
<li>My First Text <a href="#">My First Link</a></li>
<li>My First Text, My Second text</li>
</ul>
</div>
<hr/>
<div dir="LTR">
<ul>
<li><a href="#">My Web Home Site</a> <a href="#">My Other Web Site</a> My First Text</li>
<li>My First Text <a href="#">My First Link</a></li>
<li>My First Text, My Second text</li>
</ul>
</div>
It's all a matter of how you writeyour content, more information here
这完全取决于您如何编写内容，更多信息请点击此处
回答by ali nada
you could this Html/CSS styling for Arabic Language
你可以用这个 Html/CSS 样式为阿拉伯语
"<ol style="list-style-type:arabic-indic ;direction:RTL; text-align: right"><li>????? ?? ? ???? ? ???? </li></ol>"
回答by Mohsen Abasi
If "dir" does not work on the page, just use this:
如果“dir”在页面上不起作用，请使用以下命令：
style="text-align: right;
For a sample "li" tag:
对于示例“li”标签：
<ul>
<li style="text-align: right;">
blah blah....
</li>
...
</ul>
