我花了几个小时想弄清楚这个问题，但至少所有的部分看起来都是我想要的。
我正在尝试对齐徽标(目前在页面上的正确位置)，导航栏(当前居中但不在同一行)和按钮(当前浮动在另一行的右边)对齐作为标题。不管我怎么操作它，我似乎都不能让它们在同一行上看起来像它们应该的那样。
下面是我的HTML代码:
/* Globals */
* {
font-family: 'Chronica';
}
/* Elements */
.header {
width: 100%;
overflow: hidden;
}
.nav ul {
list-style-type: none;
text-align: center;
}
.nav ul li {
display: inline;
}
.nav ul li a {
text-decoration: none;
color: black;
padding-left: 50px;
padding-right: 50px;
transition: 0.3s;
}
.nav ul li a:hover {
color: gray;
}
img {
width: 83px;
margin-left: 30px;
}
#btn {
background-color: #ff0000;
border: none;
border-radius: 5px;
padding-left: 22px;
padding-right: 23px;
padding-top: 12px;
padding-bottom: 12px;
float: right;
margin-right: 30px;
transition: 0.2s;
cursor: pointer;
font-size: 16px;
}
#btn a {
text-decoration: none;
color: white;
}
#btn:hover {
border-radius: 15px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="header">
<p>
<a href="https://www.deliberatemedia.com/">
<img src="Images/dm logo.png" class="logo" /></a>
</p>
<nav class="nav">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PRICING</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<button id="btn">
<a href="https://www.deliberatemedia.com/schedule-a-meeting"
>GET STARTED</a
>
</button>
</div>
</body>
</html>我想创建的是我现有网站的标题(试图从头开始创建它来学习HTML和CSS中的编码和快捷方式)。
我一直在浏览堆栈溢出以及w3schools尝试各种不同的选项，并试图优化我试图在我现有的网站上实现的外观，但却一无所获。
在这一点上经历了大约10次迭代，没有任何工作，但这是我最接近的。
要达到你想要的效果，你需要使用flex或grid，这里我使用flex来解决你的问题:
.header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}看看Flexbox
你加上这个
display: flex;
justify-content: space-between;
to you header
/* Globals */
* {
font-family: 'Chronica';
}
/* Elements */
.header {
width: 100%;
overflow: hidden;
/* Add this */
display: flex;
justify-content: space-between;
/*----*/
}
.nav ul {
list-style-type: none;
text-align: center;
}
.nav ul li {
display: inline;
}
.nav ul li a {
text-decoration: none;
color: black;
padding-left: 50px;
padding-right: 50px;
transition: 0.3s;
}
.nav ul li a:hover {
color: gray;
}
img {
width: 83px;
margin-left: 30px;
}
#btn {
background-color: #ff0000;
border: none;
border-radius: 5px;
padding-left: 22px;
padding-right: 23px;
padding-top: 12px;
padding-bottom: 12px;
float: right;
margin-right: 30px;
transition: 0.2s;
cursor: pointer;
font-size: 16px;
}
#btn a {
text-decoration: none;
color: white;
}
#btn:hover {
border-radius: 15px;
}<div class="header">
<p>
<a href="https://www.deliberatemedia.com/">
<img src="Images/dm logo.png" class="logo" /></a>
</p>
<nav class="nav">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PRICING</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<button id="btn">
<a href="https://www.deliberatemedia.com/schedule-a-meeting">
GET STARTED
</a>
</button>
</div>哦，亲爱的，你已经使你的HTML容器如此复杂，首先是<p>，然后是<a>，最后是你的图像。但是你仍然可以用Flexbox处理它。
你可以创建3个div，并在一个扔你的图像，在一个你的导航和另一个你的按钮。把这3支放到一个容器里，给容器放一份display: flex;。这是完成了!
的例子:
<head>
<style>
.container{
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class = 'container'>
<div>
<!-- Your Logo -->
</div>
<div>
<!-- Your Nav -->
</div>
<div>
<!-- Your button -->
</div>
</div>
</body>