正常情况下容器内的元素在一行放不下的时候会自动换行,效果如图:
但有的时候不希望自动换行,这时候可以给容器添加样式white-space:norape;
代码如下:
html
<div class="box">
<div class="pull-left"></div>
<div class="pull-left"></div>
<div class="pull-left"></div>
<div class="pull-left"></div>
<div class="pull-left"></div>
<div class="pull-left"></div>
<div class="pull-left"></div>
</div>
css
.box{
width:400px;
height:400px;
background: #000;
overflow:auto;
white-space:norape;
}
.pull-left{
width:100px;
height:100px;
background: #ff0;
margin: 5px;
display: inline-block;
}
效果图: