为何float:left无法将首个<li>左移，其余<li>需保持右对齐？

嘿，我来帮你搞清楚为什么float:left没生效，以及怎么实现你想要的布局～

为什么float:left不起作用？ #

你给<ul>设置了display: flex，这意味着里面的所有<li>都是flex项。根据CSS Flexbox规范，float、clear和vertical-align属性对flex项是完全无效的——flex布局有自己的一套排版逻辑，不会理会浮动属性，所以你加的float:left相当于白写啦。

正确的实现方法 #

要让第一个<li>左对齐，其余右对齐，用flex本身的特性就能轻松做到，推荐两种方法：

方法1：利用margin:auto（最简洁） #

给第一个<li>设置margin-right: auto，它会自动吸收容器右侧的所有剩余空间，把自己“推”到最左边，剩下的<li>就会自然靠右排列。修改后的CSS如下：

ul {
  list-style: none;
  display: flex;
  /* 不需要justify-content:flex-end了，margin:auto会搞定对齐 */
}

li:first-child {
  margin-right: auto; /* 关键代码 */
}

li {
  padding: 2rem;
  margin: 0rem 3rem 0rem 3rem;
}

方法2：保留justify-content:flex-end，调整第一个li的位置 #

如果你想保留ul的justify-content:flex-end，可以给第一个<li>设置margin-left: 0，再配合margin-right: auto，效果完全一致：

ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
}

li:first-child {
  margin-right: auto;
  margin-left: 0; /* 覆盖通用li的margin-left，让它贴紧左侧 */
}

li {
  padding: 2rem;
  margin: 0rem 3rem 0rem 3rem;
}

额外小提示 #

你原来的a:hover里设置了padding:2.5rem，这会导致hover时元素尺寸变化，可能出现布局跳动的问题。可以改成给<li>设置固定高度，或者把hover的padding换成透明边框（比如border-bottom:0.5rem solid rgba(0, 180, 216, 1)），避免布局晃动～

内容的提问来源于stack exchange，提问作者geek101