我想要我的" home ";链接要向左对齐，而"登录"one_answers"注册";链接向左对齐。我正在学习导航条的教程，却被卡在这里了。教程制作者没有遇到这个问题。我甚至不能把所有的元素都向右对齐。
index . html
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hardcore Parkour</title>
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul>
<a href=""><img src="HPLogo.png" alt="Hardcore Parkour" class="logo"></a>
<li><a href="">Home</a></li>
<li><a href="log_in.html">Log in</a></li>
<li><a href="sign_up.html">Sign up</a></li>
</ul>
</nav>
</div>
</header>
</body>
我试过用一个单独的div来显示"Home"在导航标签中。在navli部分，如果我把margin-right改为margin-left，似乎不会改变任何东西，出于某种原因，结果是一样的。下面是css样式表:
style.css
body{
margin: 0;
font-family: 'Bungee', cursive;
color:rgb(255, 255, 255);
background: slateblue;
}
img{
width: 10%;
}
header{
background-color: rgb(0, 0, 0);
}
header::after{
content: '';
display: table;
clear: both;
}
.navbar{
width: 95%;
margin: 0 auto;
}
.logo{
float:left;
}
nav{
float:right;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display:inline-block;
margin-right: 20;
padding-top: 21;
padding-left: 300;
}
nav a{
color: yellow;
text-decoration: none;
}
body{
margin: 0;
font-family: 'Bungee', cursive;
color:rgb(255, 255, 255);
background: slateblue;
}
img{
width: 10%;
}
header{
background-color: rgb(0, 0, 0);
}
header::after{
content: '';
display: table;
clear: both;
}
nav{
display: flex;
width: 95%;
margin: 0 auto;
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
}
nav ul li{
display:inline;
margin-right: 20px;
}
nav a{
color: yellow;
text-decoration: none;
}<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hardcore Parkour</title>
</head>
<body>
<header>
<nav>
<a href=""><img src="HPLogo.png" alt="Hardcore Parkour" class="logo"></a>
<ul>
<li><a href="">Home</a></li>
<li><a href="log_in.html">Log in</a></li>
<li><a href="sign_up.html">Sign up</a></li>
</ul>
</nav>
</header>
</body>
</html>实现这一点的方法是使用flex。使用align items属性将导航条的显示设置为弯曲，然后将项目对齐到中心。要将元素左右移动，只需使用justify content:space between;然后你可以使用页边距来对齐你的项目。你也可以增加主页登录和注册按钮之间的间距，通过增加navulli .
如果你想设置所有元素都在右边，只需添加">ms-auto";