如何在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

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

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

Answer 2

我会使用display: flex;和flex-direction: column-reverse;-它们在一列中/彼此之间...