html - 网站横向导航

Question

我目前正处于一个网站的规划阶段，该网站需要水平滚动。

我必须解决这个问题的最简单的解决方案是朝着这个方向前进，JSFiddle .

我不确定这是否是最佳选择，因为我必须单独安排每个 div，即 left: 100% left: 200%;。

有没有办法绕过 div，使用 display: inline-block 值自动包装到视口(viewport)，这样我就不必单独安排每个 div？

Answer 1

去除绝对定位

在这里您需要做的是从分隔符中删除 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 demo .

删除每个 block 之间的空格

现在我们已经移除了 float 和定位，您会注意到每个分隔线之间有一个空白。如果我们引用this CSS Tricks article ，我们可以通过简单地给 body 一个 font-size 0，并给每个分隔符一个你想要的 font-size 来删除它重新希望字体大小在这些 block 内:

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

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

Second JSFiddle demo .