css - 将 li 左中右对齐

Question

我试图在不使用 CSS 中的引导导航栏的情况下设置导航栏，当它在 md 中显示时我可以正常工作，但当在 xs 中显示时我想在容器中有 3 个 li，第一个完全在左侧，第二个完全居中，第三个完全在右边。我让它工作到一定程度，但如果有任何意义的话，我无法让第二个或中间的那个位于中心。我使用的代码是:

#nav-xs {
  display: inline-block;
  text-align: center;
  border: 0;
  list-style-type: none;
  height: 72px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #00a4ff;
  float: left;
}

#nav-xs-left {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
  text-align: left;
}

#nav-xs-right {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: right;
  text-align: center;
}

#nav-xs-center {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: inline-block;
  text-align: center;
}

#xs-nav {
  margin: 0;
  padding: 0;
}

<div class="container-fluid f2p-nav-xs hidden-md hidden-lg hidden-sm">
  <ul id="xs-nav">
    <li id="nav-xs-left"><a href='login.php' class='btn btn-login' role='button'>Login </a></li>
    <li id="nav-xs-center"><a href='login.php' class='btn btn-login' role='button'>Login </a></li>
    <li id="nav-xs-right"><a href='login.php' class='btn btn-login' role='button'>Login </a></li>
  </ul>
</div>

谢谢你给我的任何帮助

Answer 1

您可以在 ul 上使用 display: flex;，使用 justify-content: space-between;:

#nav-xs {
  display: inline-block;
  text-align: center;
  border: 0;
  list-style-type: none;
  height: 72px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #00a4ff;
  float: left;
}

#nav-xs-left {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
  text-align: left;
}

#nav-xs-right {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: right;
  text-align: center;
}

#nav-xs-center {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: inline-block;
  text-align: center;
}

#xs-nav {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

<div class="container-fluid f2p-nav-xs hidden-md hidden-lg hidden-sm">
  <ul id="xs-nav">
    <li id="nav-xs-left"><a href='login.php' class='btn btn-login' role='button'>Login </a></li>
    <li id="nav-xs-center"><a href='login.php' class='btn btn-login' role='button'>Login </a></li>
    <li id="nav-xs-right"><a href='login.php' class='btn btn-login' role='button'>Login </a></li>
  </ul>
</div>