如何使用div元素进行水平滚动？

问题描述

我有这个div元素：

    <div id="tl"  style="float:right;width: 400px; height:100px; background-color:Green; overflow-x: scroll;overflow-y: hidden;">

        <div id='demo' style="float:left;height:90px;"> dsadsad </div>
        <div id='demo' style="float:left;height:90px;"> dsadsad </div>

    </div>

div演示将在tl div中多次复制代码。
我想水平滚动tl div。

The div demo will copy by the code more times inside tl div.I want to Horizontal Scrolling the tl div.

如何实现？

推荐答案

对于你的demodiv，更改float：left to display：inline-block;那么它应该工作。

For your "demo" divs, change float: left to display: inline-block; then it should work.

另外，请参阅Stack Overflow问题

Also, see Stack Overflow question "How to get Floating DIVs inside fixed-width DIV to continue horizontally?" for more suggestions...

编辑：如timhessel在下面的评论中说，Internet Explorer 6/7不会接受div元素的inline-block，所以你需要使用span元素为demodivs，默认情况下是内联的。

as timhessel says in the comments below, Internet Explorer 6/7 won't accept inline-block for div elements so you need to use span elements for the "demo" divs instead as they are intrinsically inline by default.

这篇关于如何使用div元素进行水平滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！