Question

我有一些带有float:left;的div，当然它们出现在彼此旁边，但除了漂浮的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。

使浮子流过而不是彼此下降

1 个答案: