RTL布局下如何将列表项的图标置于文字右侧

当列表设置direction: RTL后，元素会默认按从右到左的顺序排列，导致bi-check2-all图标出现在文字左侧。要将图标移到文字右侧（视觉层面），可以通过以下几种方法实现：

方法一：调整HTML元素顺序 #

直接将图标放在列表项文字的前方，RTL布局下第一个元素会显示在最右侧（视觉上的文字右侧）：

<ul style="direction: rtl;">
  <li><i class="bi bi-check2-all"></i> 列表项内容</li>
  <li><i class="bi bi-check2-all"></i> 列表项内容</li>
</ul>

如果需要调整图标与文字的间距，添加CSS即可：

.bi-check2-all {
  margin-right: 0.5rem; /* 按需调整间距大小 */
}

方法二：用CSS Flex布局控制顺序 #

如果无法修改HTML结构，可以通过Flex布局的order属性强制调整图标位置：

.rtl-list {
  direction: rtl;
}
.rtl-list li {
  display: flex;
  align-items: center; /* 垂直居中图标与文字 */
}
.rtl-list .bi-check2-all {
  order: 2; /* 将图标排在文字之后，视觉上显示在右侧 */
  margin-left: 0.5rem;
}
.rtl-list li .text-content {
  order: 1;
}

对应HTML结构：

<ul class="rtl-list">
  <li><span class="text-content">列表项内容</span><i class="bi bi-check2-all"></i></li>
  <li><span class="text-content">列表项内容</span><i class="bi bi-check2-all"></i></li>
</ul>

方法三：单独重置图标的排版方向 #

给图标单独设置direction: ltr，抵消父元素RTL的影响，再调整间距：

.rtl-list {
  direction: rtl;
}
.rtl-list .bi-check2-all {
  direction: ltr;
  margin-right: 0.5rem;
}

以上三种方法都能实现将图标固定在列表项文字右侧的需求，可根据你的实际HTML结构选择最合适的方案。

内容的提问来源于stack exchange，提问作者Hiba Youssef