Home / Questions / 21529
Accepted
Otto
Asked: 2020-08-25 05:54:54 +0800 CST 2020-08-25 05:54:54 +0800 CST

以正确的顺序将元素向右浮动css

  • 772

我在一个菜单中有四个项目，第一个在左边，另外三个在右边，但是在浮动时ul li float:right;，这些项目的位置是乱序的。

[Menu3] [Menu2] [Menu1]

但元素应按以下顺序显示：

[Menu1] [Menu2] [Menu3]

完整运行代码：https ://jsfiddle.net/u1eu2dku/

如何按顺序显示项目，但在相同的菜单布局中？

.menu {
  width: 100%;
  float: left;
}

.menu ul li {
  float: right;
  list-style-type: none;
  text-align: left;
}

.menu ul li a {
  padding: 10px;
}
   <div class="menu">
  <ul>
    <li style="float:left;">logo</li>
    <li><a href="">Menu1</a></li>
    <li><a href="">Menu2</a></li>
    <li><a href="">Menu3</a></li>
  </ul>
   </div>

html

2 Answers

  1. 一种选择是使用 flexbox，对齐行尾的元素并允许其中的第一个“增长”，以便它占据左侧的其余空间：

    .menu {
  width: 100%;
}

.menu ul {
  justify-content: flex-end;
  display: flex;
}

.menu ul li {
  list-style-type: none;
  text-align: left;
}

.menu ul li:first-child {
  flex: 1;
}


.menu ul li a {
  padding: 10px;
}
    <div class="menu">
  <ul>
    <li>logo</li>
    <li><a href="">Menu1</a></li>
    <li><a href="">Menu2</a></li>
    <li><a href="">Menu3</a></li>
  </ul>
   </div>

    • 6
  2. Best Answer

    Shaz 的解决方案对我来说似乎很完美，但如果由于某种原因您需要与不支持 flexbox 的浏览器兼容，您也可以使用display:inline-block并向右对齐text-align：

    .menu {
  width: 100%;
  float: left;
  text-align:right;
}

.menu ul li {
  display:inline-block;
  list-style-type: none;
  text-align: left;
}

.menu ul li a {
  padding: 10px;
}
    <div class="menu">
  <ul>
    <li style="float:left;">logo</li>
    <li><a href="">Menu1</a></li>
    <li><a href="">Menu2</a></li>
    <li><a href="">Menu3</a></li>
  </ul>
   </div>

    • 2