导航栏中链接的垂直内边距

Question

我为我的网站设计了一个新菜单，但我似乎无法在链接垂直方向上安排空间（我希望链接之间有更多的空白）。能给出什么建议吗？

html

<ul class="menu">
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#services">SERVICES</a></li>
</ul>

css

ul.menu
{
list-style-type:none;
list-style-position: inside;
margin:0;
padding:0;
padding-bottom: 1cm;
}



.menu li a, .menu li a:visited
{
padding:12px 0 0 0px;
font-family: 'Roboto Condensed', sans-serif;font-size:20px;font-weight:700;
color:#FFFFFF;
background-color:#09F;
text-align:center;
padding:3px;
text-decoration:none;

}

.menu li a:hover, menu li a:active {
background-color:#666;
}

您可以看到，我尝试使用CSS填补空白：{padding:12px 0 0 0px;}但没有成功......其他所有内容都工作得很好 - 请在fiddle上查看http://jsfiddle.net/DCxvy/

- user2080194

---

.menu li a，.menu li a：visited 定义了两个 padding，一个是 12px，另一个是 3px。请将它们全部删除，只需在您的 ul 中添加 line-height（大于您的字体大小）。 - user1487380

谢谢，我尝试添加了混合一些以下答案的行高 - 它运作良好 - 请查看最终方法的fiddle http://jsfiddle.net/gzN9N/1/ - user2080194

Answer 1

默认情况下，锚点是内联元素。要添加特定的填充值，您需要将它们呈现为内联块级元素。在您的锚点样式中添加 display: block ：

.menu li a { display: inline-block } 

此外，您需要注意您的.menu li a样式中有两个关于padding的条目。后一个（将所有方向的填充设置为3px）正在覆盖您早期的定义。

这是一个jsFiddle演示。

- BenM

Answer 2

如果我没记错的话，您想在链接之间垂直插入空格。

为此，您只需要执行以下操作：

.menu li {
  margin-bottom: 10px;
}

调整边距解决方案。

另一方面，如果您希望菜单的背景保持蓝色，并在悬停时更改颜色，则可以使用以下代码。 我还重新排列了您的CSS规则，使其更加直观。

将菜单背景设置为纯色而没有白色分隔线。

- zeusdeux

---

谢谢您的回答，我可能会改为使用一个宽度设置。 - user2080194