0

我有许多 div float:left;，当然它们彼此相邻，但除了浮动 div 不再适合包装器 div。

我需要 div 彼此相邻并在 x 轴上流动。我知道可以通过为包装器设置固定宽度并将包装器包装在另一个包装器中来完成，但宽度不是静态的，并且不喜欢使用脚本来计算宽度。

情况是：

<div id="wrapper">
  <div class="floatleft"></div>
  <div class="floatleft"></div>
  <div class="floatleft"></div>
</div>

//Wrapper WITHOUT fixed width
#wrapper{
  overflow:hidden;
}

.floatleft{
  float:left;
  width:500px;
}
4

1 回答 1

1

您可以使用inline-blockhttp://jsfiddle.net/imsky/EbAFw/white-space:nowrap 

<ul id="wrap">
    <li>A</li><li>B</li><li>C</li><li>D</li><li>E</li>    
</ul>

#wrap {margin:20px;width:300px;height:100px;background:yellow;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
li {display:inline-block;width:100px;height:100%;background:#5AA4D7;color:#fff;font-family:sans-serif}

唯一的问题是标记将对空格敏感。

编辑：这适用于跨浏览器，IE7 及以下版本只需要规则*display:inline;zoom:1末尾的a 。li

于 2012-04-13T17:51:41.497 回答