Question

我尝试按照此说明使用HTML和CSS构建下拉菜单：

Line25.com - How to create a purse CSS dropdown menu

我试图减少给定的例子，找出绝对必要的部分，省略纯粹的视觉声明（背景颜色，圆角等）。

这就是我想出来的方式：

<!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元素底部会有一个小空白区域。 nav元素正好比其内部的ul元素高7个像素。这也导致导航栏的下拉部分显示为距离太远的七个像素。

我无法弄清楚左边的哪个部分（或左边的）CSS是造成这个差距的原因。有人可以帮我弄这个吗？我希望下拉部分的顶部与导航栏的底部对齐。我想通过了解这七个像素的来源来实现这一目标。

Answer 1

nav ul {
    list-style: none;
    position: relative;
    display: inline-table;
    padding: 0 20px;
    vertical-align: top; /*add this line*/
}

将该行添加到该CSS块。这是因为您的ul已设置为某种形式的inline。出现间距是因为默认的vertical-align值为baseline，这会导致元素位于文本所在的同一行。这条线的下方间距为低于它的字母（例如y）。以下图像可帮助您可视化此基线：

Visualisation of the text's baseline

Answer 2

还有一个解决方案：

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 {
            display: table-cell;
        }
        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 {
            display: block;
            position: relative;
        }
        nav ul ul li a {
            padding: 15px 40px;
        }

的变化：

  nav ul li {
            display: table-cell;
        }

  nav ul ul li {
            display: block;

我更喜欢这个，因为你会保持你的方法一致。如果您使用内联表格，那么最好使用表格单元格来保持所有内容的相同，并且不要混合内联表格和浮动内容。

为什么我的nav-element中添加了空白区域？

2 个答案: