html - 填充未正确应用于标题

Question

我正在尝试学习基本的 HTML 和 CSS。这是我目前的代码:

http://jsfiddle.net/spadez/vvDJ9/3/

代码有两个问题:

1. 目前不仅列表项之间差距较大
2. 标题中的列表没有正确应用顶部填充。它应该位于页眉的中间。

这是代码的相关部分:

header a { padding: 15px 20px; background-color: #16AD8F; }

Answer 1

这是因为您的 li s 是行内 block 。当然，您可以重做代码并使用 float 修复它，例如...或者通过加入 li 来消除空白s 在一起( </li><li>... ，请参阅此处:http://jsfiddle.net/vvDJ9/6/ )，等等......

但是有一个很好的小技巧可以去掉空格:set font-size: 0;给他们的 parent ul元素:http://jsfiddle.net/vvDJ9/5/

#header ul {font-size: 0;}

要正确获得顶部填充，只需将 anchor 设置为 display: block; : http://jsfiddle.net/vvDJ9/9/

#header a {display: block;}