将下拉子菜单 <li> 项与页面右侧对齐，同时保持 <li> 项的顺序正确

Question

在下面的 jsfiddle 中，我演示了我面临的问题。基本上我需要一个子菜单，它可以全角打开并与浮动到页面右侧的子菜单列表项内联，同时仍保持列表项的顺序正确。如果我将 float:right 应用于 .dropdown-menu li，我可以让菜单向右浮动，但是这些项目的顺序是相反的。如果我将 float:right 应用于 .dropdown-menu ul 并将 float:left 应用于 li，则菜单根本不会向右浮动。

是否存在影响 ul 的冲突引导代码，使其无法正确浮动？还有其他我没有考虑过的解决方案吗？

我考虑过将 html 更改为与我需要的相反的顺序，但是在移动设备中查看时它的顺序将不正确。

这是 jsfiddle 中的问题示例：https://jsfiddle.net/kasiamcm/oqq73axb/

html:

<ul class="dropdown-menu">
  <li><a href="#" class="">Action</a></li>
  <li><a href="#" class="">Another action</a></li>
  <li><a href="#" class="">Something else here</a></li>
</ul>

css:

.dropdown-menu {
  position: fixed;
  top: 50px; /*height of main menu*/
  width: 100%;
display: inline-flex;}

.dropdown-menu ul {
    float: right;}

.dropdown-menu li {
    display: inline-flex;
    float: left;}

Answer 1

在这种情况下，在包含下拉项目的 ul 上设置 text-align: right（并且根本不浮动项目）会将项目放在右侧。

所以你的 CSS 变成：

.dropdown-menu {
  position: fixed;
  top: 50px; /*height of main menu*/
  width: 100%;
  display: inline-flex;
}

.dropdown-menu {
    text-align: right;
}

.dropdown-menu li {
    display: inline-flex;
}

更新小提琴：https://jsfiddle.net/oqq73axb/2/