如何使我的导航链接在悬停时有一个框？

Question

对不起这个奇怪的标题，我真的不知道该怎么称呼它。 我是设计新手，因为我一般坚持追尾，但朋友建议我试一试。我想要做的就是得到这个

看起来像这样

我目前的css如下。

＆＃13;

＆＃13;

#main-nav {
  margin-top:70px;
}

#main-nav ul {
  list-style-type: none;
}

#main-nav li {
  display:inline-block;
  position:relative;
}

#main-nav a {
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
}

#main-nav a:hover {
  background-color: #2c3e50;
}

＆＃13;

＆＃13;

＆＃13;

我不清楚我在设计时所做的事情，这可能是一个简单的解决方案，但我没有任何想法。

提前致谢。

Answer 1

您需要在CSS中添加padding和border：

padding: 10px;
border: 1px solid #333;

您可能需要的完整CSS是：

#main-nav a {
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  padding: 10px;
  display: block;
}

#main-nav a:hover {
  background-color: #2c3e50;
  border: 1px solid #333;
}

Answer 2

编辑问题已经改变。正如其他人所说，你想为你的a：hover添加填充。

#main-nav a:hover {
  background-color: #2c3e50;
  padding: 10px;
}

Answer 3

您的a元素也需要display: block。您正在向a元素添加背景，默认情况下该元素是内联的，这意味着边界框的高度和宽度由内容决定。您还需要添加一些填充。

#main-nav {
  background: #000077;
}

#main-nav ul {
  list-style-type: none;
}

#main-nav li {
  display: inline-block;
}

#main-nav a {
  padding: 15px;
  display: block;
  color: #FFFFFF;
}

#main-nav a:hover {
  background-color: #2c3e50;
}

<ul id="main-nav">
  <li><a href="#">What?</a></li>
</ul>

请注意display: block是必要的，因为否则按钮的布局将由其中包含的文本决定，而不是使用填充计算的宽度和高度。如果在不修改display属性的情况下添加填充，您会注意到填充有效，但ul和li大小仍然根据文本而不是计算的宽度和高度

查看下面的代码段以了解我的意思：

#main-nav {
  background: #000077;
}

#main-nav ul {
  list-style-type: none;
}

#main-nav li {
  display: inline-block;
}

#main-nav a {
  padding: 15px;
  color: #FFFFFF;
}

#main-nav a:hover {
  background-color: #2c3e50;
}

<ul id="main-nav">
  <li><a href="#">What?</a></li>
</ul>