html - 使用 nowrap 的水平导航

Question

对于我正在构建的具有水平导航的网站，我正在使用 white-space: nowrap;使用 display: inline-block;。这适用于水平对齐 width: 100%; 和 height: 100%; div，我面临的问题是，如果我在这些 div 中添加任何其他元素，它会插入父 div 向下大约 300 像素，如您在此处所见 JSFiddle .

我不知道是什么问题。我可以通过对每个子元素使用 position: absolute; 来绕过它，但我觉得我不应该这样做。

完整代码如下...

html, body {
    height: 100%;
}

body {
    margin: 0;  padding: 0;
    white-space: nowrap;
    font-size:0;

}

.full {
    width: 100%;
    height: 100%;
    display: inline-block;
    font-size:16px;    
}

#screen-1 {
    background: red;
}

#screen-2 {
    background: blue;
}

#screen-3 {
    background: yellow;
}

---

<div id="screen-1" class="full">
<h1>HELLO</h1>
</div>  

<div id="screen-2" class="full">

</div> 

<div id="screen-3" class="full">

</div>

Answer 1

尝试使用 position 属性。完整代码:

<style>
html, body {
    height: 100%;
}

body {
    margin: 0; 
    padding: 0;
    font-size:0;

}

.full {
    float:left;
    width: 100%;
    height: 100%;
    font-size:16px;    
}

#screen-1 {
    background: red;
    position:absolute;
    top:0px;
    left:0%;
}

#screen-2 {
    background: blue;
    position:absolute;
    top:0px;
    left:100%;
}

#screen-3 {
    background: yellow;
    position:absolute;
    top:0px;
    left:200%;
}
.wrap {
    min-width:100%;
    max-width:1000%;
    max-height: 100%;

}
</style>
<div class="wrap">
    <div id="screen-1" class="full"><h1>HELLO</h1></div>
    <div id="screen-2" class="full"></div>
    <div id="screen-3" class="full"></div>
</div>