用水平滚动条做一行div

好吧所以我认为我已经用白色空间修复了这个问题：no-wrap 它在chrome中工作，但没有别的。用水平滚动条做一行div

我有这样的事情：

<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>

借口真正形象不佳，但是这是IM效应瞄准。 enter image description here

我想要一行'项目'，如果他们超过了空间，那么应该出现水平滚动条。

希望有道理，我该如何做到这一点？

来源

2012-02-29 raklos

看起来像一个旋转木马给我。你看过jQuery和YUI提供的轮播小工具吗？ – Zoidberg 2012-02-29 12:52:29

@Zoidberb，我看着一些卡洛斯，但没有找到一个处理内容 - 即文本和图像以这种格式与最小的文字 – raklos 2012-02-29 13:52:42

检查了这一点http://developer.yahoo.com/yui/examples/carousel/ csl_imagentext_source.html – Zoidberg 2012-02-29 14:05:05

这样写：

.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/

来源

2012-02-29 12:54:57 sandeep