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/