我正在开发一个个人网站，如果有人能帮我弄清楚下面HTML和CSS代码的显示结果，我将不胜感激。
HTML:
<html>
<head>
<meta charset="utf-8">
<title>My Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav role="navigation">
<ul class="navlist">
<li><a href="#">Bio</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Whatever</a></li>
</ul>
</nav>
</body>
</html>
CSS：
* {
border: 1px dotted lightblue;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.navlist li {
display: inline-block;
}
ul.navlist li a {
padding: 25px;
}
特别是：
- 为什么
<a>元素的顶部填充没有正确识别/显示 - 为什么
<ul>和<li>元素的高度与<a>元素的高度相同，后者的填充"溢出"底部 - 我希望
<ul>和<li>元素的高度与包括填充在内的<a>元素的高度相同，这样列表项就可以保持垂直居中，顶部和底部的填充量相同。我怎样才能做到这一点
您希望它们表现为块级元素，但<a>是内联元素，而width、height、padding和margin等元素的行为与它们是块级元素时的行为不同。
如果希望接受width、height、padding和margin之类的内容，请将锚点元素设置为display: inline-block;。
除非您要向.navlist <ul>添加额外的元素，否则您可以将<ul>中锚定元素的CSS选择器简化为以下内容，从而有效地消除了原始选择器中不需要的额外特殊性。
.navlist a {
display: inline-block;
padding: 25px;
}
http://jsfiddle.net/kcofsrxh/1
A是一个内联元素。要使其表现为块级元素，请添加display: block;声明：
.navlist A {display: block; }
顺便说一句，如果菜单打算只占用一行而不覆盖多行，则将display: table用于UL元素和将display: table-cell用于LI元素可能是有意义的。这将自动删除项目之间的空白（通常是不需要的）。