Question

我在CSS方面遇到问题，我和朋友只是偶尔在网页上工作（我们都是HTML和CSS的新手）。

以下是该部分的代码：

.nav li {
 margin: auto;
 display: inline-block;
 color: white;
 padding: 10px;
 font: Times;
 text-align:center;
 float: inherit;
 }

.nav a {
text-decoration: none;
color: white;
display: inline-block;
padding: inherit;
}

当您查看我附上的图片时，您可以看到该按钮未完全填满导航栏。

here is the image (sorry for poor quality)

有谁能告诉我如何解决这个问题？

Answer 1

.nav li有填充，删除填充并对anchor元素应用填充。

.nav li{
padding:0
}

.nav li a{
padding:10px;
}

希望这会有所帮助..

Answer 2

这可能是因为li元素有填充。

.nav li {
 margin: auto;
 display: inline-block;
 color: white;
 padding: 10px; // here
 font: Times;
 text-align:center;
 float: inherit;
}

从li移除填充，并将其添加到a。

Answer 3

这是一个应该有效的fiddle。

PS。颜色仅用于测试，诀窍是您在:hover元素上使用:active或<li>

CSS，关于填写导航栏中的按钮，

3 个答案: