如何在 flexbox 导航栏中将两个元素彼此靠近放置

Question

所以我有一个包含三个元素的简单 flexbox 导航栏。

一个标志
项目列表和
一个 div 有两个按钮。

我想要 div 两个按钮位于导航栏的右侧，徽标和列表元素位于左侧。如果可能的话，我宁愿不使用边距或位置属性.

我遇到的问题是我似乎无法在导航栏的左上角获取徽标和列表项。我尝试使用 justify-content: space-between 但它只能均匀地分隔元素。（因为它应该）所以我现在在左边有我的标志，我的列表在中间，div 按钮在右边。而不是右侧的 div 个按钮和左侧的另外两个按钮。

所以我不确定什么是最好的前进方式。非常感谢帮助。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Epilogue', sans-serif;
}

.body-container {
  background-color: hsl(0, 0%, 98%);
  height: 100vh;
  width: 100vw;
  max-width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-flex li {
  margin-right: ;
  display: inline-block;
}

.navabar {
  list-style-type: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="style.css" rel="stylesheet" type="text/css">

  <title>Frontend Mentor | Intro section with dropdown navigation</title>

  <style>

  </style>
</head>

<body>

  <div class="body-container">
    <nav class="navbar">
      <img src="images/logo.svg" alt="company logo">
      <ul class="navbar-flex">
        <li><a href="#">Features</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">About</a></li>
      </ul>

      <div class="navbar-btn">
        <button class="btn btn-primary">Login</button>
        <button class="btn btn-primary">Register</button>
      </div>
    </nav>

  </div>
</body>

</html>

Answer 1

只需将 img 和 ul 标签包裹在 div 中，并向其添加 display flex。希望这能帮助您解决问题。

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Epilogue', sans-serif;
}

.body-container {
    background-color: hsl(0, 0%, 98%);
    height: 100vh;
    width: 100vw;
    max-width: 100%;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .left-element {
display : flex;
}

.navbar-flex  li {
    margin-right: ;
    display: inline-block;
}

.navabar {
    list-style-type: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href = "style.css" rel = "stylesheet" type = "text/css">
  
  <title>Frontend Mentor | Intro section with dropdown navigation</title>

  <style>

  </style>
</head>
<body>

<div class = "body-container">
  <nav class = "navbar">
  <div class = 'left-element'>
    <img src = "images/logo.svg" alt = "company logo">
    <ul class = "navbar-flex">
      <li><a href = "#">Features</a></li>
      <li><a href = "#">Company</a></li>
      <li><a href = "#">Careers</a></li>
      <li><a href = "#">About</a></li>
    </ul>
    </div>
    
    <div class = "navbar-btn">
    <button class = "btn btn-primary">Login</button>
    <button class = "btn btn-primary">Register</button>
    </div>
  </nav>
  
</div>
</body>
</html>

Answer 2

您可以将左侧元素包裹在父级 div 中，然后为此 div

提供 flexbox 属性

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Epilogue', sans-serif;
}

.body-container {
  background-color: hsl(0, 0%, 98%);
  height: 100vh;
  width: 100vw;
  max-width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-flex li {
  margin-right: ;
  display: inline-block;
  margin-left: 20px;
}

.navabar {
  list-style-type: none;
}

.leftDiv {
  display: flex;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="style.css" rel="stylesheet" type="text/css">

  <title>Frontend Mentor | Intro section with dropdown navigation</title>

  <style>

  </style>
</head>

<body>

  <div class="body-container">
    <nav class="navbar">
    <div class='leftDiv'>
      <img src="images/logo.svg" alt="company logo">
      <ul class="navbar-flex">
        <li><a href="#">Features</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>

      <div class="navbar-btn">
        <button class="btn btn-primary">Login</button>
        <button class="btn btn-primary">Register</button>
      </div>
    </nav>

  </div>
</body>

</html>

如何在 flexbox 导航栏中将两个元素彼此靠近放置

How can I position two elements close to each other in a flexbox navigation bar

html

css

flexbox

nav