我在 css 中 rtl 我的页面有问题，有人可以帮我吗？答案

【问题标题】：I have a problem about rtl my page in css, can anyone help me?我在 css 中 rtl 我的页面有问题，有人可以帮我吗？
【发布时间】：2019-02-14 12:27:03
【问题描述】：

当我想要 rtl 元素在任何文本或跨度旁边包含 <i> 标记时，我面临创建 rtl（从右到左）样式表的问题。例如，有这样的事情：此标签内包含三个元素：

<li><a href="#"><i class="sl sl-icon-docs"></i>Requests<span>2</span></a></li>

第一张图片：这是在 rtl 之前显示我的主题：

位于主按钮标题之前的图标
按钮标题
一个标签，用于将新请求的数量显示为标签。

一个顺序应该反转并从右边显示<a>标签内的所有项目，这意味着从右边我们将有1.icon 2.title 3.label

第二张图片：在主要内容上使用flex-direction: row-reverse; rtl：

我将direction: rtl; 应用于<li> 元素但没有任何效果，您可以在第二张图片上看到更改。

【问题讨论】：

标签： html css right-to-left

【解决方案1】：

您可以通过在其上使用flex-direction: row-reverse 来反转链接<a> 的内容：

.reverse{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

<ul>
    <li><a href="#"><i class="sl sl-icon-docs">Icon</i>Requests<span>2</span></a></li> 
     <li><a href="#" class="reverse"><i class="sl sl-icon-docs">Icon</i>Requests<span>2</span></a></li> 
</ul>

<!-- Other examples -->

<a class="reverse">(1) Click me<i class="sl sl-icon-docs">(2) icon</i></a>
<h3 class="reverse">(1) Title example<i class="sl sl-icon-docs">(2) icon</i></h3>

【讨论】：

@ user10980566 感谢它适用于我的示例，但在以下其他状态下不起作用：<a class="reverse">Click me<i class="sl sl-icon-docs">icon</i></a> 或：<h3>Title example<i class="sl sl-icon-docs">icon</i></h3> 我也尝试将<h3> 标签插入<div>，但不起作用再次。
它也应该适用于您的示例...在包含多个直接子代的任何父代上添加 flex-direction: reverse 应该将它们反转。您可以查看MDN 了解更多示例。
问题是这个标签里面只有一个孩子，文字属于它的<a>标签。
因此，您需要将要反转的元素包含在单独的子元素（span、div ...）中，并使用单个父元素将它们全部包含在内。如果我的编辑没有解决您的问题，您可以编辑自己的帖子，包括无法正常工作的全新代码吗？

【解决方案2】：

RTL 有效，但不适用于 <span> 部分。如果您可以将 span 更改为部门，那么它会起作用。

否则，您可以在将<li> 设为display:flex 后使用flex-direction: row-reverse

这是我的代码：

#rtl {
  direction: rtl;
}

#flex>a {
  display: flex;
  flex-direction: row-reverse;
}

li {
  background: red;
  padding: 1em;
  border-radius: 3em;
  margin: 1em;
  text-decoration: none;
  width: 200px;
  text-align: center;
}

span {
  background: white;
  border-radius: 10em;
  padding: 0 0.7em;
}

ul {
  list-style-type: none;
}

<ul>
  <li id="normal">
    <a href="#">
      <img src="https://picsum.photos/30/30?image=0" />Normal <span>1</span>
    </a>
  </li>
  <li id="rtl">
    <a href="#">
      <img src="https://picsum.photos/30/30?image=0" />RTL <span>2</span>
    </a>
  </li>
  <li id="flex">
    <a href="#">
      <img src="https://picsum.photos/30/30?image=0" />Row-Reverse <span>3</span>
    </a>
  </li>
</ul>

代码需要一些润色，但我认为你已经得到了你想要的东西。

我希望这会有所帮助。

和平?

【讨论】：