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

时间:2013-09-07 18:59:15

标签: html css

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

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

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

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

1 个答案:

答案 0 :(得分:3)

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

#nav li {
   display: inline;
}

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

我建议你使用

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

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