小技巧：让代码更简洁

小技巧：让代码更简洁：让元素横排显示（Float

）

开发工具与关键技术：Dream weaver 、HTML+CSS3  
作者：曾子千
撰写时间：2019年1月18日

通常我们建几个元素出来，都是在我们显示器的左边一行一行从上往下的显示我们将它称为“行内标签”，但是想要它并排显示，该怎么办？
(1) 现在的演示图

(2)想要的效果图

如果我们想要演示图达成想要的效果图，那么有以下比较简单的方法！

一、 方法：Float 浮动

(1) 在css3里有一种元素叫Float浮动；这个非常非常很简单，在你给想要并排显示的几个

的选择器里的CSS样式都添加一个左边浮动的样式：float：left，运行效果出来了

(2) 还有一种更简单的表达，同样是利用左边浮动的样式：float：left；在css3的开头的公共样式里为float：left单独命名一个类：.fr { float: left; }把这个f r的类加到想要并排显示的几个<class=”fr”>类里；

<div class="cornet">
	<div class="con1 fr"></div>
	<div class="con2 fr"></div>
	<div class="con3 fr"></div>
	<div class="con4 fr"></div>
</div>

运行效果也就出来了!