我在 css 中的 rtl 我的页面有问题，任何人都可以帮助我吗？

Question

当我想在任何文本或跨度旁边添加 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> 元素，但没有任何效果，您可以在第二张图片上看到变化。

Answer 1

您可以使用 flex-direction: row-reverse 反转 link <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>

Answer 2

RTL 有效，但在 <span> 部分无效。如果你能把span改成一个division就可以了。

否则你可以在制作 <li> 之后使用 flex-direction: row-reverse display:flex

这是我的代码：

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

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

希望对您有所帮助。

和平

我在 css 中的 rtl 我的页面有问题，任何人都可以帮助我吗？

I have a problem about rtl my page in css, can anyone help me?

html

css

right-to-left