仅使用水平滚动的Div

88

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

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

IE7中的以下作品：

overflow-x: scroll;

谁能在IE6中也提供解决方案？

html css

— 理查德·埃夫（Richard Ev）
source

在IE6中，overflow-x属性应该可以正常工作。您可能有复杂的因素。您可以发布出现问题的测试用例吗？

— 本·布兰克

看来我的问题出在别处-我所包含的DIV正在溢出到其容器中。

— 理查德·埃夫

189

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

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

您可以在此处或下面的动画中查看最终结果。如果表格确定了容器的高度，则无需显式设置overflow-y为hidden。但是请理解，这也是一种选择。

— 桑普森
source

3

我失踪了white-space: nowrap;。奇迹般有效！

— AndreFeijo

4

如果一张图片值一千个单词，那么一张gif值一百万。

— HoldOffHunger

你是冠军，我的朋友。

— 斯宾塞·威廉姆斯

如果我在每一列上也需要单独的垂直滚动条，而在主容器上也不需要垂直滚动条怎么办？我正在尝试white-space: nowrap;对主容器和设置height以及overflow-y: scroll对单个列进行此操作，但是它不起作用。

— Sachin

空白：nowrap; 我总是掉进那个！感谢真棒答案！

— 塔尔西伯尼

68

我无法获得所选的答案来工作，但经过一番研究，我发现水平滚动div必须white-space: nowrap在CSS中。

这是完整的工作代码：

<!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>

— WKS
source

2

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

— HoldOffHunger

21

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>

— 狄更斯-詹姆斯·麦克法兰
source

17

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

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

查看工作链接：点击我

的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;
}

— 安基特
source

3

试试这个：

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

— 厄兹卡尼
source