我试着创建一个简单的导航栏，上面有一个按钮，但似乎我不能完美地对齐按钮。 代码如下所示
null
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 60px;
background: #393e46;
}
.nav .logo {
float: left;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
color: orange;
font-size: xx-large;
}
.nav .butn {
float: right;
width: 150px;
height: 40px;
background: beige;
line-height: 60px;
}
a {
color: orange;
font-size: x-large;
}<body>
<div class="nav">
<div class="logo">
<ul>
<li>Hello</li>
</ul>
</div>
<div class="butn">
<a href="#">click me</a>
</div>
</div>
</body>null
我还在这里包含了codepen linkenter链接描述
我刚刚在.nav.butn中添加了margin:10px0，因此剩余的空间用作margin
null
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 60px;
background: #393e46;
}
.nav .logo {
float: left;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
color: orange;
font-size: xx-large;
}
.nav .butn {
float: right;
width: 150px;
height: 40px;
background: beige;
line-height: 60px;
margin: 10px 0;
}
a {
color: orange;
font-size: x-large;
}<body>
<div class="nav">
<div class="logo">
<ul>
<li>Hello</li>
</ul>
</div>
<div class="butn">
<a href="#">click me</a>
</div>
</div>
</body>
所以这就是你的答案。 不要在每个元素上使用height，在按钮和徽标上使用float属性，而是使用flex属性。
null
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 60px;
background: #393e46;
display: flex;
align-items: center;
}
.nav .logo {
text-align: center;
color: orange;
font-size: xx-large;
}
.nav .butn {
background: beige;
margin: auto;
}
a {
color: orange;
font-size: x-large;
}<div class="nav">
<div class="logo">
<ul>
<li>Hello</li>
</ul>
</div>
<div class="butn">
<a href="#">click me</a>
</div>
</div>