У меня проблема с RTL моей страницы в 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

RTL работает, но не на <span> части.Если вы можете изменить интервал на деление, то это сработает.

В противном случае вы можете использовать flex-direction: row-reverse после создания <li> a 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>

Код нуждается в доработке, но я думаю, что вы получили то, что искали.

Надеюсь, это поможет.

Мир ?

Answer 2

Можно отменить содержание ссылки <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>