Question

我正在开发一个个人网站，如果有人可以帮我弄清楚以下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>元素的高度相同，后者的填充＆＃34;溢出＆＃34;底部？
我希望<ul>和<li>元素的高度与<a>元素的高度相同，包括其填充，因此列表项保持垂直居中，顶部和底部有相同数量的填充物。我怎样才能做到这一点？

Answer 1

您希望它们表现为块级元素，但<a>是内联元素，例如width，height，{{1并且padding的行为与它们是块级元素时的行为不同。

如果您希望接受margin，display: inline-block;，width和height等内容，请将您的锚元素设置为padding。

除非您要向margin .navlist添加其他元素，否则您可以将<ul>中的锚元素的CSS选择器简化为以下内容，从而有效地删除了其他元素原始选择器中不需要的特异性。

<ul>

http://jsfiddle.net/kcofsrxh/1

Answer 2

A是一个内联元素。要使其表现为块级元素，请添加display: block;声明：

.navlist A {display: block; }

顺便说一下，如果菜单只打算占用一行而不包含多行，那么对display: table元素UL和display: table-cell使用LI可能是有意义的1}}元素。这将自动删除（通常不需要的）项目之间的空格。

无法弄清楚这个HTML / CSS发生了什么。

2 个答案: