Question

我正在尝试设置一个导航栏而不使用CSS中的bootstrap导航栏，我在md中显示时工作但是我希望在xs中显示时容器内有3 li，第一个完全在左侧，第二个完全居中，第三个完全在右边。我有一点工作，但如果有意义的话，不能让第二个或中间的那个在中心。我正在使用的代码是：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

谢谢你的任何帮助

Answer 1

您可以使用display: flex; ul上的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; }：

＆＃13;

<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>

＆＃13;

/applications/{name}/tokens/{name}

＆＃13;

将李左右对齐

1 个答案: