Question

任何人都可以解释为什么顶部导航元素与位于此jsfiddle下方的内容div之间存在小差距？

当我浮动导航列表项时，这会在顶部导航元素和位于其下方的主要内容元素之间创建一个小间隙。如果我使导航项内联块，则差距消失。我真的不希望这种行为，因为浮动的项目应该从页面流中删除，因此不能推下内容div。我查看了Chrome Dev Tools中的页面，并没有看到任何可以解释这个差距的内容。

感谢。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Header Gap Problem</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../reset.css" />
    <link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="wrapper">
    <nav class="nav" role="navigation">
        <li class="nav-item">Members</li>
        <li class="nav-item">Events</li>
    </nav>
    <div class="content-main">
        Main content
    </div>
</div>
</body>
</html>

CSS

body {
    -mox-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    margin: 0 auto;
}

.nav {
    position: relative;
    display: inline-block;
    width: 100%;
    background: #34495e;
}

.nav-item {
    float: left;
    /*
    display: inline-block;
    */
    padding: 1em;
    color: #fff;
    text-decoration: none;
}

.content-main {
    padding: 1em;
    background: #cf6;
}

Answer 1

内联块实际上添加了一个空格字符。你可以通过几种方式减轻影响;我经常将内联块元素的包含元素设置为font-size：0。

.wrapper {
    margin: 0 auto;
    font-size:0;
}

http://jsfiddle.net/taruckus/4doogedh/14/

更多信息和内联块技术： http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

<。> .nav应该具有以下样式：

  .nav {
position: relative;
display: block;
width: 100%;
background: #34495e;
height:100px;
}

让我听听它是否成功了！

Answer 3

这是一个更好的选择：

.nav {
position: relative;
display: block;
width: 100%;
background: #34495E;
overflow: hidden;
}

完全响应所有。

为什么浮点数和div之间存在差距？

3 个答案: