如何实现导航栏列表项左右对齐？float属性无效求解决

你遇到的问题是float属性在flex布局下不生效——因为你给ul设置了display: flex，flex容器内的子元素（li）会忽略float属性，所以你加的float: left根本起不了作用。

要实现导航栏列表项的左/右对齐，直接用flex布局的属性就能搞定，具体方案如下：

原代码 #

CSS #

nav {
  padding: 40px 50px;
  background-color: black;
}

ul {
  list-style-type: none;
  padding: 0vh 15vh;
}

li {
  color: white;
  text-align: center;
}

@media screen and (min-width:768px) {
  nav {
    padding: 20px 20px;
    height: 30px;
  }
  ul {
    display: flex;
    flex-direction: row;
  }
  li {
    padding: 0px 20px;
    display: inline;
    float: left;
  }
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

HTML #

<nav class="navbar">
  <ul>
    <li>About</li>
    <li>Courses</li>
    <li>Forum</li>
    <li>Learning Paths</li>
    <li>Contact</li>
  </ul>
</nav>

修改方案 #

1. 实现左对齐 #

在@media中的ul样式里，添加justify-content: flex-start（flex布局默认就是左对齐，需要明确设置时加上即可），同时去掉li里没用的float: left和display: inline（flex子元素不需要这些）：

@media screen and (min-width:768px) {
  nav {
    padding: 20px 20px;
    height: 30px;
  }
  ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* 左对齐 */
  }
  li {
    padding: 0px 20px;
  }
}

2. 实现右对齐 #

只需把ul的justify-content改成flex-end即可：

@media screen and (min-width:768px) {
  nav {
    padding: 20px 20px;
    height: 30px;
  }
  ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end; /* 右对齐 */
  }
  li {
    padding: 0px 20px;
  }
}

原理说明 #

flex布局是专门为一维布局设计的，justify-content属性用于控制主轴（这里是水平方向）上的子元素对齐方式，比float更适合导航栏这种横向布局场景，还能避免float带来的 clearfix 等问题。

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