水平スクロールバーでdivの1行を作成します

オクラホマホワイトスペースを使用してこれを修正したと思います。ノーラップクロムで動作しましたが、それ以外は何もしませんでした。水平スクロールバーでdivの1行を作成します

私はこのようなものがあります：

<div class="outer"> 
    <ul> 

     <li> 
      <div class="inner"> 
      <a href="#"><img src="eg1.jpg" /></a> 
      <br /> 
      EG1 lorem ipsum 
      </div> 
     </li> 

     <li> 
      <div class="inner"> 
      <a href="#"><img src="eg2.jpg" /></a> 
      <br /> 
      EG2 lorem ipsum 
      </div> 
     </li> 
. 
. 
. 
//etc (multiple li's) 

</ul> 

</div>

言い訳は本当に貧しいイメージが、これはを目指しEFECTイムです。 enter image description here

「項目」が1つの行を超えてスペースを超えた場合は、水平スクロールバーが表示されます。

私はこれをどのように達成できるのでしょうか？

出典

2012-02-29 raklos

私にカルーセルのように見えます。 jQueryとYUIによって提供されるカルーセルウィジェットを見ましたか？ – Zoidberg

@Zoidberb、私はいくつかのカラフルを見ていましたが、内容を処理するものは見つかりませんでした - このフォーマットのテキストと画像は最小限の騒ぎで – raklos

http://developer.yahoo.com/yui/examples/carousel/ csl_imagentext_source.html – Zoidberg

書き込み、このようにすべてのあなたの子供のためのフロート左の位置を使用します。

.outer{ 
    width:400px; 
    overflow:auto; 
    white-space:nowrap; 
} 
.outer li{ 
    display: inline-block; 
    *display: inline;/*For IE7*/ 
    *zoom:1;/*For IE7*/ 
    vertical-align:top; 
    width:40px; 
    margin-right:20px; 
    background:red; 
    white-space:normal; 
}

チェックこのhttp://jsfiddle.net/ZrpHv/あなたがオーバーフローを持つ親のdivの内側に1つの大規模な水平方向のdivを配置する必要があり

出典

2012-02-29 12:54:57 sandeep