对于我正在构建的具有水平导航的网站,我正在使用white-space: nowrap;
display: inline-block;。这适用于水平对齐width: 100%;height: 100%; div,我面临的问题是,如果我在这些div中添加任何其他元素,则会将父div向下推约300px,如您在此处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>

最佳答案

尝试使用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>

关于html - 使用nowrap进行水平导航,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19236547/

10-12 12:59
查看更多