我尝试按照以下解释仅使用 HTML 和 CSS 构建下拉菜单:
Line25.com - How to create a purse CSS dropdown menu
我试图简化给定的示例以找出哪些部分是绝对必要的，省去了纯粹的视觉声明(背景颜色、圆 Angular 等)。
我就是这样想到的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css" media="screen">
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
line-height: 24px;
}
nav {
background-color: green;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
padding: 0 20px;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding: 25px 40px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
background-color: orange;
padding: 0;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="." target="">ITEM1</a></li>
<li><a href="." target="">ITEM2</a>
<ul>
<li><a href="." target="">SUBITEM1</a></li>
<li><a href="." target="">SUBITEM2</a></li>
</ul>
</li>
<li><a href="." target="">ITEM3</a></li>
<li><a href="." target="">ITEM4</a></li>
</ul>
</nav>
</body>
</html>
当我使用 Chrome 或 Firefox 查看时，导航元素底部有一个小的空白区域。 nav 元素比直接位于其内部的 ul 元素高 7 个像素。这也会导致导航栏的下拉部分显示得过高 7 个像素。
我无法弄清楚遗漏(或遗漏)CSS 的哪一部分是造成这种差距的原因。有人可以帮我弄这个吗？我希望下拉部分的顶部与导航栏的底部对齐。我想通过了解这七个像素的来源来实现该目标。
最佳答案
nav ul {
list-style: none;
position: relative;
display: inline-table;
padding: 0 20px;
vertical-align: top; /*add this line*/
}
将该行添加到该 CSS block 。这是因为您的 ul 已设置为某种形式的 inline。出现间距是因为默认的 vertical-align 值为 baseline，这会导致元素与文本位于同一行。此行下方有间距，用于在其下方下降的字母(例如 y)。下图可以帮助您可视化此基线:
.
关于html - 为什么我的导航元素中添加了一个空白区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25190493/