我無法將串列移到導航元素的左側。我試圖使導航元素相對和串列絕對，但這只會使單詞相互重疊。
nav {
height: 50px;
width: 400px;
background-color: red;
}
li {
display: inline;
justify-content: space-evenly;
margin: 10px;
font-size: 20px;
}<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>uj5u.com熱心網友回復：
該justify-content屬性在這里無關緊要 - 它僅適用于 Flex 或 Grid 布局中的元素。
<ul>這里的問題是和<li>元素的默認邊距/填充。
您可能還想設定line-heighton 以<nav>使串列項更加居中。
nav {
height: 50px;
width: 400px;
background-color: red;
line-height: 48px;
}
nav > ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 10px;
font-size: 20px;
}<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>uj5u.com熱心網友回復：
您可以通過將 ul 的 display 屬性設定為 flex 來實作相同的結果
nav {
height: 50px;
width: 400px;
background-color: red;
line-height: 48px;
}
ul{
margin: 0;
padding: 0;
display:flex;
justify-content: space-around;
}
<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414281.html
標籤：
上一篇：CSS下拉選單-未正確對齊