html - 将下拉子菜单<li>元素对齐到页面右侧，同时保持<li>元素正确的顺序

在下面的jsfiddle中，我演示了我面临的问题。基本上，我需要一个子菜单，该子菜单可以打开全角并与浮动在页面右侧的子菜单列表项保持内联，同时仍然使列表项保持正确的顺序。如果我对.dropdown-menu li应用float：right，我可以使菜单浮动到正确的位置，但是项目的顺序相反。如果我对.dropdown-menu ul使用float：right，对li应用float：left，那么菜单根本就不会浮动。

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

我曾考虑过将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;}

最佳答案

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

因此，您的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/