我在rts中的CSS页面有问题，有人可以帮我吗？

Question

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

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

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

1. 位于主按钮标题之前的图标

2. 按钮标题

3. 一个标签，用于显示新请求的数量作为标签。

订单应颠倒并从右侧显示<a>标记内的所有项目，这意味着从右侧开始我们将拥有1.icon 2.title 3.label

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

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

Answer 1

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

.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>部分无效。如果您可以将跨度更改为除法，那么它将起作用。

否则，您可以在将flex-direction: row-reverse设为<li>后使用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>

代码需要完善，但我认为您已经找到了想要的东西。

我希望这会有所帮助。

和平