仅具有水平滚动的 Div答案

【问题标题】：Div with horizontal scrolling only仅具有水平滚动的 Div
【发布时间】：2010-10-01 10:01:18
【问题描述】：

我有一个固定宽度的 DIV，其中包含一个包含许多列的表格，并且需要允许用户在 DIV 内水平滚动表格。

这需要仅在 IE6 和 IE7 上工作（内部客户端应用程序）。

以下在 IE7 中有效：

overflow-x: scroll;

任何人都可以提供在 IE6 中也适用的解决方案吗？

【问题讨论】：

overflow-x 属性在 IE6 中应该可以正常工作；你可能有复杂的因素。你能发布一个显示问题的测试用例吗？
看来我的问题出在其他地方 - 我的包含 DIV 溢出到它的容器中。

标签： html css internet-explorer

【解决方案1】：

解决方案相当简单。为确保我们不会影响表格中单元格的宽度，我们将关闭 white-space。为了确保我们得到一个水平滚动条，我们将打开 overflow-x。差不多就是这样：

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

您可以看到the end-result here，或在下面的动画中。如果表格决定了容器的高度，则不需要将overflow-y 显式设置为hidden。但请理解，这也是一种选择。

【讨论】：

我错过了white-space: nowrap;。像魅力一样工作！
如果一张图片值一千字，那么一张gif值一百万。
你是冠军，我的朋友。
如果我在每一列上也需要一个单独的 垂直滚动 而在主容器上没有垂直滚动怎么办？我正在尝试在主容器上使用white-space: nowrap; 并将height 和overflow-y: scroll 设置为各个列，但它不起作用。
空白：nowrap；我总是陷入那种状态！谢谢真棒回答！

【解决方案2】：

overflow-x: scroll;
overflow-y: hidden;

编辑：

它对我有用：

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>

【讨论】：

【解决方案3】：

我无法让选定的答案起作用，但经过一点research，我发现水平滚动的 div 在 css 中必须有white-space: nowrap。

这是完整的工作代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>

【讨论】：

此处“空白：nowrap”的建议似乎已融入正确答案。 +1 用于改进接受的答案。

【解决方案4】：

对于水平滚动，请记住以下两个属性：

overflow-x:scroll;
white-space: nowrap;

查看工作链接：click me

HTML

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

CSS

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}

【讨论】：

【解决方案5】：

试试这个：

HTML：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS：

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

空白：nowrap；属性不允许您换行文本。请看这里的例子：https://codepen.io/oezkany/pen/YoVgYK

【讨论】：

对我来说是 flex-shrink:0;