Question

Screenshot http://uploadpie.com/EKA3i

header元素包含一个浮动到左边，一个（带有四个li项）浮动到右边。很简单，除了文字＆＃34;最佳城市指南＆＃34;与右侧的UL稍微不一致底部边距和下一个容器元素之间有一个GAP与图像....
这种差距导致不对齐吗？
是什么导致了两个容器之间的差距？

Here is a codepen of it （比强制性代码snippit更全面）

<header class="main-header clearfix">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <ul class="main-nav">
            <li><a href="#">ice cream</a></li>
            <li><a href="#">donuts</a></li>
            <li><a href="#">tea</a></li>
            <li><a href="#">coffee</a></li>
        </ul>
    </header><!--/.main-header-->

Answer 1

在这种情况下，标题的高度由<ul>及其子<li>元素决定，而不是左侧的<h1>。

我通过在标题中的每个元素上使用Google Chrome开发工具中的'inspect element'来发现这一点，直到找到一个填充标题的整个高度，或显示与高度匹配的边距和/或填充。< / p>

特别是这个CSS：

@media (min-width: 769px)
.main-nav {
    float: right;
    margin: 0.67em 0;
}

对于<li> elements：

@media (min-width: 769px)
.main-nav li {
    padding: .67em 3em;
}

如何识别幻影空白？

1 个答案: