html - 使浮子流过而不是落在彼此下面

Question

我有许多带有 float:left; 的 div，当然它们会彼此相邻出现，但除了 float 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;
}

Answer 1

您可以使用 inline-block 来完成和 white-space:nowrap http://jsfiddle.net/imsky/EbAFw/

<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在 li 的末尾规则。