css - overflow 允许水平滚动

Question

我正在处理这个页面，尝试让溢出内容能够水平滚动。我已经尝试将 body 设置为 hidden，类名为 "real body" 设置为 auto，但似乎不起作用。

- Ben McCombs

---

请问你能分享一下你的代码吗？参见我的网站或项目中有问题，我可以直接粘贴链接吗？ - Donald Duck

Answer 1

你需要用一个 position: relative; overflow: auto 的 div 包裹你的长内容 div。

就像这样：

.wrapper {
  position: relative;
  overflow: auto;
}

.content {
  position: absolute;
  width: 30000px;
}

为了更好的示例，请查看http://jsfiddle.net/wXqPv/

- Ya Zhuang

---

加1。这个方法的原因是因为它具有明确的宽度。 - Chris - Jr

那么将宽度设置为自动，当水平内容被添加时应该有效吗？ - LordDraagon

Answer 2

下面的代码对我有效。 确保将其包含在父元素中，而不是实际的元素本身。

.parent {
  white-space: nowrap;
}

- ThijmenGThN

Answer 3

你可以使用这段代码与上面的幻灯片更改一起使用：

.wrapper {
    position: relative;
    width: 200px;
    height: 100px;
    outline: 1px solid lime;
    overflow-x: auto;
}
.longcontent {
   position: absolute;
   width: auto;
   height: 100%;
}

- Zeeshan