盒子菜单

HTML

<div class="container">
    <div class="blue">首页</div>
    <div class="blue">新闻</div>
    <div class="blue">资讯</div>
    <div class="blue">关于</div>
</div>
					    

CSS

body { margin: 20px; }
.container {
    width: 1000px;
    /*设置为伸缩容器*/
    display: -webkit-box;/*老版本：iOS 6-, Safari 3.1-6*/
    display: -moz-box;/*老版本：Firefox 19- */
    display: -ms-flexbox;/*混合版本：IE10*/
    display: -webkit-flex;/*新版本：Chrome*/
    display: flex;/*标准规范：Opera 12.1, Firefox 20+*/    
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal; 
}
.blue {
    background: #357c96;
    font-weight: bold;
    margin: 2px;
    padding: 20px;
    color: #fff;
    font-family: Arial, sans-serif;
}