css - 如何在导航栏中将按钮 float 到右侧，以免影响主导航栏？

Question

如何将登录按钮置于右侧并使主导航栏居中？

ul {
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 0px;
  list-style-type: none;
  display: inline-block;
  align-items: center;
  align-self: center;
  align-content: center;
}

ul.login {
  float: right;
}

li {
  margin-right: 30px;
  float: left;
}

li.last {
  margin-right: 0px;
}

li a {
  text-decoration: none;
  text-align: center;
  display: block;
  font-family: Poppins;
  font-size: 1em;
  font-weight: normal;
}

<div class="main-nav">
  <ul>
    <li><a href="index.php" id="Home">Home</a></li>
    <li><a href="shop.php" id="Shop">Shop</a></li>
    <li><a href="about.php" id="About">About</a></li>
    <li><a href="account.php" id="Account">My Account</a></li>
    <li class="last"><a id="Cart" href="cart.php">Cart</a></li>
  </ul>
  <ul class="login">
    <li><a href="login.php">Login</a></li>
  </ul>
</div>

目前，登录按钮向右浮动，但主导航栏略微向左移动。

Answer 1

试试下面的代码:

.main-nav {
    display: flex;
}
ul:not(.login) {
    display: table;
    margin: 0 auto;
}
ul {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 0px;
    list-style-type: none;
    display: inline-block;
    align-items: center;
    align-self: center;
    align-content: center;
}
li {
    margin: 0 15px;
    display: table-cell;
}
ul li a {
    text-decoration: none;
    text-align: center;
    display: block;
    font-family: Poppins;
    font-size: 1em;
    font-weight: normal;
}
ul.login li {
    margin-right: 0;
}
ul:not(.login) li a {
    margin: 0 5px;
}

注意:它完美地工作。