我試圖把一切都集中起來。我無法理解是什么導致兩側的空間不相等：
header {
text-align: center;
border: solid pink;
}
body {
font-family: 'Lora', serif;
margin: 0;
}
h1 {
color: #143774;
font-family: lora;
margin-bottom: 1px;
font-size: 3.375;
}
ul {
display: flex;
justify-content: space-around;
border: solid blue;
}
li {
list-style: none;
color: #707070;
font-family: 'Ubuntu', sans-serif;
text-transform: uppercase;
border: solid red;
margin: 0 1em;
}<body>
<header>
<logo>
<h1> Living the simple life</h1>
<p> a blog exploring minimalism in life</p>
</logo>
<nav>
<ul>
<li>home</li>
<li>about me</li>
<li>recent posts</li>
</ul>
</nav>
</header>
</body>
uj5u.com熱心網友回復：
串列項的中心對齊，但標簽的長度不同，所以有不均勻空間并肩作戰。
聽起來你想要整個串列居中而不是每個專案。要在兩側具有相等的填充，請使用space-between代替space-around并在串列上設定填充。
但是，您會注意到，這會使事物在視覺上失去平衡，因為現在中間的專案移到了一側。您的原始布局可能會更好。
header {
text-align: center;
border: solid pink;
}
body {
font-family: 'Lora', serif;
margin: 0;
}
h1 {
color: #143774;
font-family: lora;
margin-bottom: 1px;
font-size: 3.375;
}
ul {
display: flex;
justify-content: space-between; /* <-- updated */
border: solid blue;
padding: 0 30px; /* <-- specific padding value */
}
li {
list-style: none;
color: #707070;
font-family: 'Ubuntu', sans-serif;
text-transform: uppercase;
border: solid red;
margin: 0 1em;
}<body>
<header>
<logo>
<h1> Living the simple life</h1>
<p> a blog exploring minimalism in life</p>
</logo>
<nav>
<ul>
<li>home</li>
<li>about me</li>
<li>recent posts</li>
</ul>
</nav>
</header>
</body>uj5u.com熱心網友回復：
space-between在您的ulflex 顯示幕上使用并從中ul洗掉默認填充并洗掉您在li.
header {
text-align: center;
border: solid pink;
}
body {
font-family: 'Lora', serif;
margin: 0;
}
h1 {
color: #143774;
font-family: lora;
margin-bottom: 1px;
font-size: 3.375;
}
ul {
display: flex;
justify-content: space-between;
border: solid blue;
padding: 0;
}
li {
list-style: none;
color: #707070;
font-family: 'Ubuntu', sans-serif;
text-transform: uppercase;
border: solid red;
}<body>
<header>
<logo>
<h1> Living the simple life</h1>
<p> a blog exploring minimalism in life</p>
</logo>
<nav>
<ul>
<li>home</li>
<li>about me</li>
<li>recent posts</li>
</ul>
</nav>
</header>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/392228.html
上一篇：Bootstrap3..跨列無法按我的預期作業..我無法獲得跨越整個寬度的按鈕
下一篇：文本框游標向右