我在导航元素中定位列表元素时遇到问题

Question

我很难将列表放在导航元素的左侧。我试图使nav元素相对，列表绝对，但这只是使单词相互重叠。

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>

Answer 1

您可以通过将ul的显示属性设置为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>

Answer 2

justify-content属性在这里无关紧要——它只适用于Flex或Grid布局中的元素。

这里的问题是<ul>和<li>元素上的默认边距/填充。

您可能还想在<nav>上设置line-height，以便列表项更加居中。

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>