.rule_tab{width: 100%;display:box;display:-webkit-box; display:-moz-box; box-orient:horizontal;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;}
.rule_tab a{box-flex:1;-webkit-box-flex:1;-moz-box-flex:1; }(占几份)
这个属性与margin:0 auto;冲突(width:100%;会出现滚动条),改成margin:0px;(谷歌浏览器)
1、与position:fixed冲突
嵌套div解决
2、与a、img标签冲突 ,偏左或者 不均分
使之变为块状,position,left,margin-left
3、a、img、p 混合
层层嵌套
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" type="text/css" href="css/common.css"><style>/**/.menu{width: 100%; height: 47px; background: rgba(0,0,0,0.8); position: fixed;bottom: 0px;}.menu_btn{width: 100%; text-align: right;display: box; display:-webkit-box; display:-moz-box;position: relative; margin:0px;box-orient:horizontal; -webkit-box-orient:horizontal;-moz-box-orient:horizontal; }.menu_btn div{color:#fff; font-size:14px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1; display: block; text-align: center; }img{display: block; left: 50%; margin-left: -12px; position: relative;}/**/</style></head><body><div class="menu " style="margin:0px"><div class="menu_btn"><div style="text-align:center;"><p>首页</p><p><img src="img/index.png" width="21px" height="17px"></p></div><div style="text-align:center;"><p>首页</p><p><img src="img/index.png" width="21px" height="17px"></p></div><div style="text-align:center;"><p>首页</p><p><img src="img/index.png" width="21px" height="17px"></p></div><div style="text-align:center;"><p>首页</p><p><img src="img/index.png" width="21px" height="17px"></p></div></div></div><!--menu--></body></html>