Question

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

我无法弄清问题是什么。我可以通过对每个子元素使用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>

使用nowrap的水平导航

1 个答案: