3

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

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/

4

2 回答 2

2

锚点默认是内联元素。要添加某些填充值，您需要将它们呈现为内联块级元素。添加display: block到您的锚样式：

.menu li a { display: inline-block }

此外，您应该注意，您的.menu li a样式有两个padding. 后一个（将填充设置为3px所有侧面）覆盖了您之前的定义。

这是一个jsFiddle 演示。

于 2013-03-13T10:24:24.607 回答
0

如果我没记错的话，你想在链接之间垂直插入空格。为此，您所要做的就是：

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

摆弄保证金解决方案。

另一方面，如果您希望菜单的背景保持蓝色阴影并在悬停时更改颜色，那么这就是小提琴。我还重构了您的 CSS 以更直观的方式排列规则。

将菜单背景设置为纯色，没有白色换行符。

于 2013-03-13T15:01:34.237 回答