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;

但我无法扭转元素。

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

非常感谢您提前。

标签： htmlangularcss

Answer 1

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

如果我在祖先上明确设置属性，它似乎与 aflex-direction: row;一起使用。lidir

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