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

您可以在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>

Answer 2

关于您的代码，如果您从float: left;中删除.nav-wrapper ul，它将可以正常工作。

我认为，使用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>

Answer 3

我认为您可以有一个header元素（顶部栏），其中包含两个nav，每个都有其自己的对齐方式

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

导航栏带有“ float：left;” ＆'float：right;'

3 个答案: