Question

我有一个视频元素列表，如果它们溢出容器的宽度，我想要水平滚动。不幸的是我让它滚动但滚动条很长。

我只想滚动内容的长度。

演示

CSS

    #RTCChatContainer
    {
        /*overflow: auto;*/
        overflow-x: scroll;
        overflow-y: hidden;
        height: 152px;
        width: 100%;
        border: 1px dashed blue;
    }

    #RTCChat
    {
        display: block;
        height: 122px;
        width: 600%;
        max-width: 600%;
        border: 1px dashed red;
    }

        #RTCChat video
        {
            display: inline-block;
            border: 1px solid black;
        }

HTML

    <div id="ContentWrapper" class="row">
        <div class="col-sm-4">



        </div>
        <div class="col-sm-8">

            <div id="RTCChatContainer">
                <div id="RTCChat"><video id="RTCMyVideo" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf0" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf1" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf2" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf3" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf4" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf5" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf6" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf7" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf8" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf9" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video></div>
            </div>


        </div>
    </div>
    <footer></footer>
</div>

Answer 1

将#RTCChat更改为以下内容：http://jsfiddle.net/55z6tnL0/。

#RTCChat {
    height: 122px;
    white-space: nowrap;
}

CSS水平DIV滚动

1 个答案: