请告知如何将我的导航栏链接与我的标题对齐。我还希望导航栏链接间隔开来。当我查看手机上的链接时，它们彼此非常接近。我希望我的标题在最左边，链接在最右边，并带有一些填充。请参阅下面的代码。
谢谢！
.HTML
</head>
<body>
<header id="header">
<div id="logo">
<span>My Site</span>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#"><b>About</b></a></li>
<li><a class="nav-link" href="#"><b>Work</b></a></li>
<li><a class="nav-link" href="#"><b>Blog</b></a></li>
</ul>
</nav>
</header>
.CSS
#header {
top: 0;
left: 0;
right: 0;
position: relative;
background-color: #707793;
display: flex;
flex-direction: column;
align-items: center;
font-family: "Pacifico", sans-serif;
}
#logo {
display: flex;
flex-direction: column;
align-items: center;
}
#logo span {
color: #d9fff6;
text-shadow: 2px 2px 5px #70fad9;
font-size: 30px;
}
#logo img {
width: 75px;
height: 60px;
}
#nav-bar ul {
padding: 0;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
}
#nav-bar .nav-link {
color: #f6f7f8;
padding: 0;
text-decoration: none;
font-size: 20px;
font-family: "Handlee", sans-serif;
text-shadow: 2px 2px 5px #bec1ce;
}
@media only screen and (min-width: 460px) {
#logo {
flex-direction: row;
}
#logo img {
width: 85px;
height: 70px;
}
#logo span {
font-size: 25px;
margin-left: 20px;
}
#nav-bar .nav-link {
padding: 5px 30px;
}
}
@media only screen and (min-width: 900px) {
#header{
flex-direction: row;
justify-content: space-around;
}
#nav-bar .nav-link {
padding: 0px 20px;
}
}
@media only screen and (min-width: 992px) {
#logo span {
font-size: 30px;
}
#logo img {
width: 100px;
height: 85px;
}
}
你能试试这段代码吗，希望它能解决你的查询。我们只需为 460 像素以下的移动分辨率添加一个媒体查询，您可以根据需要更改此值。
#header {
top: 0;
left: 0;
right: 0;
position: relative;
background-color: #707793;
display: flex;
flex-direction: column;
align-items: center;
font-family: "Pacifico", sans-serif;
}
#logo {
display: flex;
flex-direction: column;
align-items: center;
}
#logo span {
color: #d9fff6;
text-shadow: 2px 2px 5px #70fad9;
font-size: 30px;
}
#logo img {
width: 75px;
height: 60px;
}
#nav-bar ul {
padding: 0;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
}
#nav-bar .nav-link {
color: #f6f7f8;
padding: 0;
text-decoration: none;
font-size: 20px;
font-family: "Handlee", sans-serif;
text-shadow: 2px 2px 5px #bec1ce;
}
@media only screen and (min-width: 460px) {
#logo {
flex-direction: row;
}
#logo img {
width: 85px;
height: 70px;
}
#logo span {
font-size: 25px;
margin-left: 20px;
}
#nav-bar .nav-link {
padding: 5px 30px;
}
}
@media only screen and (min-width: 900px) {
#header {
flex-direction: row;
justify-content: space-around;
}
#nav-bar .nav-link {
padding: 0px 20px;
}
}
@media only screen and (min-width: 992px) {
#logo span {
font-size: 30px;
}
#logo img {
width: 100px;
height: 85px;
}
}
@media only screen and (max-width: 460px) {
#header{
flex-direction: row;
padding: 0px 10px;
justify-content: space-between;
}
#nav-bar .nav-link {
padding: 0 7px;
font-size: 18px;
}
#nav-bar li:last-child .nav-link {
padding-right: 0;
}
}<header id="header">
<div id="logo">
<span>My Site</span>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#"><b>About</b></a></li>
<li><a class="nav-link" href="#"><b>Work</b></a></li>
<li><a class="nav-link" href="#"><b>Blog</b></a></li>
</ul>
</nav>
</header>