如果想把多个块级元素放到同一行上，同学们首先想到的是浮动，但是就仅仅独此一种吗，答案不是的。这里小强老师总结了5种布局方式，希望对大家有所帮助。
第一种方法： 浮动法
这种方法是最简单的，也是我们初学css必须掌握的技能，就是把li浮动起来就好了。
代码如下：
- 左侧
- 中间
- 右侧
效果如下：
第二种方法： 定位法
这种方法也可以，但是比较少用。
第三种方法： 转换为行内块法
我们知道，我们CSS显示模式，有行内显示模式（inline），有块级显示模式（block），还有行内块显示模式（inline-block）
我们知道，在网页布局中，很多地方，我们能用标准流做的，就不用浮动或者定位来做。因为 inline-block 属于标准流，因此比起浮动和定位，更为稳定。
例如淘宝网：
代码如下：
- 左侧
- 中间
- 右侧
效果如下：
第四种方法： table-cell
我们知道 display：table 是转化为表格元素的方法 display:table-cell 转换为单元格元素
- 左侧
- 中间
- 右侧
效果如图所示：
这种方法不适合ie6、7，但是考虑到ie6.7已经很少很少了，我们可以放心的用它了。
第五种方法： CSS3 布局 display:flex
这是根据CSS3盒子模型，新增属性，有了它书写很方便，而且每个li的宽度可以自适应父盒子，以后用它做响应式网页方便了很多。
- 左侧
- 中间
- 右侧
效果如图：
注意： 因为css3肯定有浏览器兼容性问题，大家不要忘了加前缀。在这里，小强老师想让大家代码看的更清除，因此没有加前缀。
例如：display:-webkit-flex; -webikt-flex:1;
怎么样，原来盒子排列也有这么多方法，特别是后面三种方法，会运用越来越多。因为，以后的网站朝着html5和css3大步前进。
小强零零壹和大家一起分享。