Flexbox 對齊項目之間的內容空間不均勻分布

Question

我有這個帶有 flexbox 的導航欄。 我使用justify-content: space-between但似乎項目分布不均，因為中心項目有點在左側。 有什么我想念的嗎？ 對不起，基本問題。

它目前的樣子和應該是什么樣子

代碼筆： 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>

Answer 1

有一個空a標簽占用了一些空間。 要么它應該從 HTML 中移除，要么它應該包裹button 。 其他一切都很完美。

<a class="nav-button" href="#">
    <button>Contact</button>
</a>

Answer 2

在<a>標簽內使用<button>Contact</button> 。 你也可以使用justify-content: space-evenly; 如果你想均勻地填充空間。