所以我有一个简单的flexbox导航栏，有三个元素。
- 标识
- 物品清单和
- 有两个按钮的div
我想要的是div与两个按钮是在我的导航栏的右侧和徽标和列表元素在左侧。如果可能的话，我希望不要使用margin或position属性。
我遇到的问题是，我似乎不能得到徽标和列表项目在我的导航栏的左角。我试着用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>只需将img和ul标签包装在div中，并为其添加显示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>你可以在父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>