带有“浮动：左；”的导航栏和'浮动：对;'答案

【问题标题】：Nav bar with 'float: left;' & 'float: right;'带有“浮动：左；”的导航栏和'浮动：对;'
【发布时间】：2019-09-14 13:39:13
【问题描述】：

我希望我的导航栏左侧有导航按钮，右侧有我的注册/登录按钮。我已经设法拥有一个主导航栏和一个用于登录/注册的单独导航栏，但这与我的代码混淆了。

我试图用 ':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>

【问题讨论】：

Bienvenue sur Stack Overflow :) 为什么你的 HTML 中有一些 PHP？您可以编辑 sn-p 以获得干净的minimal reproducible example 吗？
float 布局是过去的技术，grid 和 flexbox 可用。
尝试删除float: left;
使用浮动而不是最后一个子伪。让主 div 向左浮动，然后向左浮动，用于内容 div #1 的左侧，然后向右浮动，用于 div #2

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

您可以在 ul 元素上使用 flexbox，并通过应用 margin-left: auto 将其最后一个子元素向右移动（在这种情况下不需要浮动）：

.nav-wrapper ul {
  display: flex;
  padding-left: 50px;
  list-style: none;
}

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

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

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

【讨论】：

我试过了，但如果我只是删除了左边的浮动，我也会遇到同样的问题。它给人一种奇怪的效果......

【解决方案3】：

关于您的代码，如果您从 .nav-wrapper ul 中删除 float: left;，它将起作用。

在我看来，使用CSS网格更直观，并将您的ul划分为两个逻辑单元（左侧主要ul，右侧为次要ul）：

.nav-wrapper {
  display: grid;
  grid-template-columns: 1fr max-content;
}

.nav-wrapper ul.list {
  display: flex;
  list-style-type: none;
  padding: 0;
}

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

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

<div class="nav-wrapper">
    <ul class="list list-main">
        <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>
    <ul class="list list-secondary">
        <li><a href="login.php">Log In</a></li>
        <li><a href="signup.php">Sign Up</a></li>
    </ul>
</div>

【讨论】：