0

如何使子 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>
4

1 回答 1

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/

于 2013-07-05T10:54:39.290 回答