我不能让我的导航栏文字链接水平？

Question

我花了一段时间试图找出如何使文本链接水平放置在导航栏上，但没有成功。我非常喜欢编码所以这可能非常容易，我使用的是html和CSS ，我试过把它们放在同一条线上。还使用：

#nav li a {
    color: black;
    display: inline;
    list-style-type: none;
}

#nav li a {
    color: black;
    position: relative; 
}

我试图在网站上找到答案，但我看不到一个，所以我想我也可以问问别人。谢谢你的阅读。

Answer 1

您的目标是错误的元素，它应该是

#nav li {
   display: inline;
}

您选择了a元素，您需要定位li，默认情况下a是inline元素，li会在另一个元素下方呈现，为了使它们内联，我们定位li

我建议你使用

#nav li {
   display: inline-block;
   margin-left: -4px; /* If that white space matters to you */
}

因为你会得到同样的效果，但还有一些额外的奖励，比如margins padding，可以让你的元素空白。或者，您也可以使用float: left;，但您需要clear您的花车，因此坚持使用inline-block