横向网站导航
横向网站导航
提问于 2013-10-07 11:21:47
我目前正处于一个网站的规划阶段，需要水平滚动。
我要解决的最简单的解决办法是朝这个方向走，JSFiddle。
我不确定这是否是最好的选择，因为我必须分别安排每个div，即left: 100% left: 200%;。
是否有方法绕过div，将display: inline-block值自动包装到视口，这样我就不必单独安排每个div了吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-10-07 11:27:29
移除绝对定位
这里需要做的是从分隔符中删除float和绝对定位，只需将white-space: nowrap添加到body中即可。当您的分隔符设置为显示为inline-block时，这些分隔符会受到white-space属性的影响。
body {
margin: 0; padding: 0;
white-space: nowrap;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
}JSFiddle演示。
移除每个块之间的空格
现在我们已经移除了浮标和位置，您会注意到每个分隔符之间都有一个空白。如果我们提到这篇CSS技巧文章，我们可以简单地给body一个0的font-size，并给每个除法器一个font-size，表示您希望这些块中的字体大小：
body {
margin: 0; padding: 0;
white-space: nowrap;
font-size:0;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
font-size:16px;
}第二次JSFiddle演示。
Stack Overflow用户
发布于 2013-10-07 11:34:31
http://jsfiddle.net/MsRCS/3/
您可以移除绝对定位，而使用浮点数。
body {
margin: 0; padding: 0;
width:300%;
}
.full {
width: 33.3%;
height: 100%;
display: inline-block;
float: left;
}
#screen-1 {
background: red;
}
#screen-2 {
background: blue;
}
#screen-3 {
background: yellow;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19223533
复制相关文章
相似问题
腾讯云开发者
