如果想把多个块级元素放到同一行上，同学们首先想到的是浮动，但是就仅仅独此一种吗，答案不是的。这里小强老师总结了5种布局方式，希望对大家有所帮助。
这种方法是最简单的，也是我们初学CSS必须掌握的技能，就是把li浮动起来就好了。代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul{width:80%;height: 200px; list-style: none;} li{float: left;width: 200px;height: 200px; background:pink; margin-left: 10px;} </style></head><body> <ul> <li>左侧</li> <li>中间</li> <li>右侧</li> </ul></body></html>效果如下：
这种方法也可以，但是比较少用。
我们知道，我们CSS显示模式，有行内显示模式（inline），有块级显示模式（block），还有行内块显示模式（inline-block）我们知道，在网页布局中，很多地方，我们能用标准流做的，就不用浮动或者定位来做。因为inline-block属于标准流，因此比起浮动和定位，更为稳定。例如淘宝网：
代码如下：
效果如下：
我们知道display：table是转化为表格元素的方法 display:table-cell转换为单元格元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul{width:80%;height: 200px; list-style: none;border-spacing: 10px 0;/* 因为使用table-cell之后，margin是不能用的，因此这里使用border-spacing */ border-collapse:separate;} li{width: 200px;height: 200px; background:pink; display: table-cell;} </style></head><body> <ul> <li>左侧</li> <li>中间</li> <li>右侧</li> </ul></body></html>效果如图所示：
这种方法不适合ie6、7，但是考虑到ie6.7已经很少很少了，我们可以放心的用它了。
这是根据CSS3盒子模型，新增属性，有了它书写很方便，而且每个li的宽度可以自适应父盒子，以后用它做响应式网页方便了很多。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul{width:80%;height: 200px; list-style: none; display: flex; /* 利用flex 来进行划分布局 */ flex-flow:row; /* 设置是横向分布还是纵向分布 如果是flex-flow:column;是三个竖直排列 */ } li{height: 200px; background:pink; flex:1; /* 平局分成三份，每个li占一分 */ margin-left: 10px; } </style></head><body> <ul> <li>左侧</li> <li>中间</li> <li>右侧</li> </ul></body></html>效果如图：
注意：因为css3肯定有浏览器兼容性问题，大家不要忘了加前缀。在这里，小强老师想让大家代码看的更清除，因此没有加前缀。例如：display:-webkit-flex; -webikt-flex:1;怎么样，原来盒子排列也有这么多方法，特别是后面三种方法，会运用越来越多。因为，以后的网站朝着html5和css3大步前进。小强零零壹和大家一起分享。
新闻热点
疑难解答
