div要素を使って水平スクロールするには？

Question

私はこの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を水平スクロールしたい。

どうすれば実現できますか？

Answer 1

は：表示するには、左：インラインブロック;それはうまくいくはずです。また

、

EDIT ...もっと提案のためのスタックオーバーフローの質問「How to get Floating DIVs inside fixed-width DIV to continue horizontally?」を参照してください：timhesselは以下のコメントで述べているように、Internet Explorerの6/7を使ってdiv要素のインラインブロックを受け入れることはありませんデフォルトでは本質的にインラインであるため、 "デモ" divの代わりにspan要素を使用する必要があります。

Answer 2

jQueryを使用している場合、私はあなたが望むと思うことをするために以下を使用しています。あなたの "デモ" divを、変更フロートの場合

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

Answer 3

いくつかのことを試してみて、何をしようとしているのか、私はあなたがしたいことを信じています。容器の大きさ。

CSS：

div.horiz-container { 
     border: 1px solid silver; 
     height: 100px; 
     overflow-x: auto; 
     overflow-y: hidden; 
     whitespace: nowrap; 
     width: 400px; 
    } 

    div.horiz-container div.content { 
     float: left; 
     display: inline; 
     height: 100px; 
     width: 500px; 
    } 

    div.horiz-container p { 
     float: left; 
     display: inline; 
     height: 100px; 
     width: 100px; 
     text-align: center; 
     position: relative; 
    } 

HTML：

<div class="horiz-container"> 
    <div class="content"> 
     <p>Lorem</p 
     <p>ipsum</p> 
     <p>dolor</p> 
     <p>sit</p> 
     <p>amet</p> 
    </div> 
</div> 

がライブデモを参照してください： HTML Divs, Columns, Horizontal Scroll Bar