Question

这是合约。我有一个宽度为100％的容器DIV。在那个DIV里面，我有大量的空白DIV浮动到左边，显示：阻挡它们。（用于测试目的）

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

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

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

非常感谢！

这是一张图片来帮助： alt text

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

Answer 2

您是否尝试过white-space:nowrap;？

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

溢出：自动和DIV问题

2 个答案: