让div中的内容不换行

本文转载自： https://www.cnblogs.com/nier/archive/2012/07/20/2601630.html 作者：nier 转载请注明该声明。

通常我们的需求就是让div中的元素不换行

举个例子

<ul>

　　<li><img src="img.gif" /></li>

　　<li><img src="img.gif" /></li>

　　<li><img src="img.gif" /></li>

　　<li><img src="img.gif" /></li>

　　<li><img src="img.gif" /></li>

　　<li><img src="img.gif" /></li>

　　<li><img src="img.gif" /></li>

　　<li><img src="img.gif" /></li>

扫描二维码关注公众号，回复： 10346577 查看本文章

　　<li><img src="img.gif" /></li>

　　<li><img src="img.gif" /></li>

　　<li><img src="img.gif" /></li>

</ul>

ul{

white-spacing:nowrap;//通过设置这个属性可以让元素不换行

}

ul li{

display:inline-block;//但是不换行的元素必须是行内块级元素

float:left;

width:50px;

}