html - 我不能让我的导航栏文本链接水平？

Question

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

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

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

我试图在网站上找到答案，但我看不到答案，所以我想我不妨问问人们。感谢您的阅读。

score 3 · Accepted Answer

您定位错误的元素，它应该是

#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

1 回答 1