Question

如何让子div在外div中显示所有内容而不是第二行？外部div宽度应该是固定的，因此滚动条应该是可见的，这样我们就可以滚动查看所有内部div。

<style type="text/css">
    .child
    {
        width: 100px;
        float: left;
    }
</style>

<div style="width: 500px; overflow: scroll;">
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
</div>

Answer 1

在这里：http://jsfiddle.net/thirtydot/pkbkY/1/

#scroll_container {
    width: 500px;
    overflow: scroll;
    white-space: nowrap;
}
.child {
    width: 100px;
    display: inline-block;
    border: 1px solid red;
}

如果您需要消除差距，最简单的解决方案是删除子元素之间的空格：http://jsfiddle.net/thirtydot/pkbkY/2/

内部div用于水平滚动扩展外部div

1 个答案: