html - 带有 'float: left;' 和 'float: right;' 的导航栏

Question

我希望我的导航栏在左侧有导航按钮，在右侧有我的注册/登录。我已经设法拥有一个主导航栏和一个用于登录/注册的独立导航栏，但这会扰乱我的代码。

我尝试用':last-child' 做一些事情，但它似乎不起作用...

.nav-wrapper ul {
  float: left;
  padding-left: 50px;
}

.nav-wrapper ul li {
  display: inline-block;
}

.nav-wrapper ul li:not(:first-child) {
  margin-left: 36px;
}

.nav-wrapper ul li:last-child {
  margin-right: 18px;
  float: right;
}

.nav-wrapper ul li a {
  display: inline-block;
  outline: none;
  color: #333333;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1.24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: normal;
}

<nav class="nav-bar">
  <input type="checkbox" id="nav" class="hidden">
  <label for="nav" class="nav-btn">
    				    <i></i>
    				    <i></i>
    				    <i></i>
                    </label>
  <div class="logo">
    <a href="#" class="name">"logo"</a>
  </div>
  <div class="nav-wrapper">
    <ul class="list">
      <li><a href="index.php">Home</a></li>
      <li><a href="collections.php">Collections</a></li>
      <li><a href="contact.php">Contact</a></li>
      <li><a href="login.php">Log In</a></li>
      <li><a href="signup.php">Sign Up</a></li>
    </ul>
  </div>
</nav>

Answer 1

在我看来，你可以有一个标题元素(顶部栏)，里面有两个导航栏，每个导航栏都有自己的对齐方式

<header class="topbar">
  <div class="logo">
    <a href="#" class="mylogo">My logo</a>
  </div>
  <nav class="navigation">
    <ul>
      <li><a href="index.php">Home</a></li>
      <li><a href="collections.php">Collections</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
  </nav>
  <nav class="user">
    <ul>
      <li><a href="login.php">Log In</a></li>
      <li><a href="signup.php">Sign Up</a></li>
    </ul>
  </nav>
</header>

然后

header.topbar {
  position: relative;
  display: block;
  float: left;
  width: 100%;
}
.logo {
  position: relative;
  display: block;
  float: left;
}
nav.navigation {
  position: relative;
  display: block;
  float: left;
}
nav.user {
  position: relative;
  display: block;
  float: right;
}
nav ul {
  position: relative;
  display: block;
  float: left;
  list-style: none;
}
nav ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0px 12px;
}