css - 内部 div 以水平滚动扩展外部 div

Question

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

http://jsfiddle.net/pkbkY/

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