我的導航欄 CSS 有問題。我想將專案與紫色 div 的中心對齊，但文本之間有空格。如果沒有這些空間，我如何實作對齊？
螢屏： 
代碼：
<div class="navbar">
<h1 class="logo">ab</h1>
<p class="items">O nás</p>
<p class="items">Reference</p>
<p class="items">Blog</p>
</div>
<style>
.navbar{
margin: 30px;
padding: 10px;
height: 100px;
background: red;
display: flex;
}
.navbar .logo{
font-size: 50px;
}
.navbar .items{
float: left;
display: flex;
flex-grow: 1;
justify-content:center;
background: blueviolet;
align-items: center;
}
</style>
uj5u.com熱心網友回復：
flex-box 總是需要盡可能多的空間來填充盒子。
所有你的p.items都是flex，被覆寫div的也是彈性的。
該p有flex-grow: 1這樣他們會有內部的覆寫寬度相同div。
這個問題的解決方案是創建另一個div來覆寫你的所有專案display: flex并flex-grow: 1從你的items班級中洗掉和，這樣你的文本之間的空格將被洗掉。
<div class="navbar">
<h1 class="logo">ab</h1>
<div class="d-flex">
<p class="items">O nás</p>
<p class="items">Reference</p>
<p class="items">Blog</p>
</div>
</div>
<style>
.navbar{
margin: 30px;
padding: 10px;
height: 100px;
background: red;
display: flex;
}
.navbar .logo{
font-size: 50px;
}
.navbar .d-flex {
display: flex;
flex-grow: 1;
background: blueviolet;
justify-content: center;
align-items: center;
}
.navbar .items{
margin: 0 10px;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/361306.html
下一篇：如何將平行四邊形和英雄文本居中