Html 仅具有水平滚动的Div_Html_Css_Internet Explorer

Html 仅具有水平滚动的Div

html css internet-explorer

Html 仅具有水平滚动的Div,html,css,internet-explorer,Html,Css,Internet Explorer,我有一个固定宽度的DIV，其中包含一个包含许多列的表，需要允许用户在DIV中水平滚动表这只需要在IE6和IE7上工作（内部客户端应用程序） IE7中的以下工作： overflow-x: scroll; 有人能帮我找到一个同样适用于IE6的解决方案吗？这个解决方案相当简单。为了确保不影响表中单元格的宽度，我们将关闭空白。为了确保获得水平滚动条，我们将启用overflow-x。差不多就是这样： .container{ 宽度：30em；溢出-x：自动；空白：nowrap； } 您可以看到，或

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

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

IE7中的以下工作：

overflow-x: scroll;

有人能帮我找到一个同样适用于IE6的解决方案吗？

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

.container{
宽度：30em；
溢出-x：自动；
空白：nowrap；
}

您可以看到，或者在下面的动画中。如果表格确定了容器的高度，则不需要将

overflow-y

显式设置为

hidden

。但要明白这也是一种选择

编辑：

这对我很有用：

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

我无法获得所选答案，但经过一段时间后，我发现水平滚动div在css中必须有

空白：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>


某物
#卷轴的{
宽度：1000px；
高度：190px；
溢出：自动；
溢出y：隐藏；
保证金：0自动；
空白：nowrap
}
img{
宽度：300px；
高度：150像素；
利润率：20px 10px；
显示：内联；
}

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

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

见工作链接：

HTML

试试这个：

HTML:

空白：nowrap；属性不允许您包装文本。请参见此处的示例：

overflow-x属性在IE6中应该可以正常工作；你可能有复杂的因素。你能发布一个显示问题的测试用例吗？看起来我的问题在别处-我的包含DIV溢出到它的容器中。工作起来很有魅力！如果一张图片抵得上千言万语，一张gif抵得上一百万。你是冠军，我的朋友。如果我在每一列上也需要一个单独的垂直滚动条，而在主容器上没有垂直滚动条，该怎么办？我正在尝试使用

空白：nowrap和设置高度
和overflow-y：滚动到各个列，但它不工作。空白：nowrap；我总是在那跌倒！谢谢你的回答！这里“空白：nowrap”的建议似乎已经融入了正确的答案中+1用于改进已接受的答案。它为我做的是flex收缩：0；
overflow-x:scroll;
white-space: nowrap;

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

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

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

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

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