溢出：自动和 DIV 问题答案

【问题标题】：Overflow:auto and DIV Problem溢出：自动和 DIV 问题
【发布时间】：2010-12-10 22:30:38
【问题描述】：

这是交易。我有一个宽度为 100% 的容器 DIV。在那个 DIV 里面，我有大量的空白 DIV 漂浮在左边，上面有 display:block。（用于测试目的）

我在容器上有overflow-x:auto。

一旦最后一个 div 到达容器元素的末尾，它就会下降到下一行，而不是与其他 DIV 保持一致并在容器上启动滚动条。

如何防止 DIV 掉到下一行并强制它们调用容器上的滚动行为？

让我知道非常感谢！

这里有一张图片可以帮助你：

【问题讨论】：

你们说的都对！非常感谢！

标签： css html scroll overflow

【解决方案1】：

<html>
    <head>
        <style type="text/css">
            #container {
                white-space:nowrap;
            }

            .child {
                background-color:#dddddd;
                display:inline-block;
                height:100px;
                width:100px;

                /* Trick FF2 into using inline-block */
                display:-moz-inline-stack;

                /* Trick IE6 into using inline-block */
                *display: inline;
                zoom:1;
            }
        </style>
    </head>
    <body>

        <div id="container">

            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>

        </div>

    </body>
</html>

【讨论】：

我注意到您在 DIV 中添加了句点。这是否意味着 DIV 内部需要一些东西才能正常工作？
不，DIV中不需要有内容，这只是我测试代码的一种方式

【解决方案2】：

你试过white-space:nowrap;吗？

您可能还会发现需要改用display:inline-block; 而不是float:left;。

【讨论】：