我有这个带有 flexbox 的导航栏。我用 justify-content: space-between
但似乎这些元素分布不均,因为中心元素有点在左侧。有什么我想念的吗?对不起,基本问题。
How it currently looks like和 how it should look like
密码笔:https://codepen.io/joxs546/pen/qBRYZLa
* {
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #e2dfe3;
}
.logo {
height: 85px;
width: 85px;
display: inline-block;
cursor: pointer;
background: url('https://dummyimage.com/400x400/000/fff') no-repeat;
background-size: contain;
}
.logo:hover {
background: url('https://dummyimage.com/400x400/000/ffff') no-repeat;
background-size: contain;
}
li,
a,
button {
font-family: PT Sans, sans-serif;
font-weight: bold;
font-size: 18px;
color: black;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.nav-ul {
list-style: none;
}
.nav-ul li {
padding: 0px 40px;
display: inline-block;
}
.nav-ul li a {
transition: all 0.3s ease 0s;
}
.nav-ul li a:hover {
color: cornflowerblue;
}
button {
padding: 9px 25px;
background-color: cornflowerblue;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
color: white;
}
<header>
<div class="logo">
</div>
<nav class="nav">
<ul class="nav-ul">
<li> <a href="#">Services</a></li>
<li> <a href="#">Project</a></li>
<li> <a href="#">About</a></li>
</ul>
</nav>
<a class="nav-button" href="#"></a><button>Contact</button>
</header>
最佳答案
使用<button>Contact</button>
<a>
内部标签。
您也可以使用 justify-content: space-evenly;
如果你想均匀地填充空间。
关于javascript - Flexbox Justify Content Space 元素之间的分布不均匀,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67088237/