1

对于我正在构建的具有水平导航的站点，我使用white-space: nowrap; 的是display: inline-block;. 这适用于水平对齐divwidth: 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>
4

1 回答 1

0

尝试使用该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>
于 2013-10-07T23:57:40.323 回答