css实现多个盒子在一行显示的方法

第一种方法： 浮动法

这种方法是最简单的，也是我们初学css必须掌握的技能，就是把li浮动起来就好了。
代码如下：

    
    
    


    

        
• 左侧

        
• 中间

        
• 右侧

    

第二种方法： 定位法

这种方法也可以，但是比较少用。

第三种方法： 转换为行内块法

我们知道，我们CSS显示模式，有行内显示模式（inline），有块级显示模式（block），还有行内块显示模式（inline-block）

我们知道，在网页布局中，很多地方，我们能用标准流做的，就不用浮动或者定位来做。因为 inline-block 属于标准流，因此比起浮动和定位，更为稳定。

例如淘宝网：
代码如下：

    
    
    


    

        
• 左侧

        
• 中间

        
• 右侧

    

第四种方法： table-cell

我们知道 display：table 是转化为表格元素的方法  display:table-cell 转换为单元格元素
  

    
    
    


    

        
• 左侧

        
• 中间

        
• 右侧

    

第五种方法： CSS3 布局 display:flex

这是根据CSS3盒子模型，新增属性，有了它书写很方便，而且每个li的宽度可以自适应父盒子，以后用它做响应式网页方便了很多。

    
    
    


    

        
• 左侧

        
• 中间

        
• 右侧

    

注意： 因为css3肯定有浏览器兼容性问题，大家不要忘了加前缀。在这里，小强老师想让大家代码看的更清除，因此没有加前缀。
例如：display:-webkit-flex;  -webikt-flex:1;

怎么样，原来盒子排列也有这么多方法，特别是后面三种方法，会运用越来越多。因为，以后的网站朝着html5和css3大步前进。