html - 如何反转 ul -> li 中的两个元素位置

Question

我正在使用 ng-multiselect-dropdown 库来创建具有多选选项(复选框和标签)的下拉列表。如图所示，一切正常。

<div>
<ul class="item2" style="max-height: 197px;">
    <li class="multiselect-item-checkbox ng-star-inserted" style="">
        <input aria-label="multiselect-item" type="checkbox">
        <div>test3</div>
    </li>
    <li class="multiselect-item-checkbox ng-star-inserted" style="">
        <input aria-label="multiselect-item" type="checkbox">
        <div>test1</div>
    </li>
</ul>
</div>

我需要在 RTL 模式下反转元素。我尝试添加如下属性:direction="rtl";, display: flex;, flex-direction: row-reverse; , flex-wrap: wrap;

但我无法设法反转元素。

简而言之，我正在努力实现以下目标:

非常感谢您。

Answer 1

这是一个jsbin:https://jsbin.com/hijagigave/1/edit?html,css,output

如果我在祖先上显式设置属性 dir，它似乎可以与 li 上的 flex-direction: row; 一起使用。

.multiselect-item-checkbox {
  display: flex;
  flex-direction: row;
}