调试了半天
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title></title> <style> html{font-size:20px;} img{ width: 100%; } .shop-top { width: 16rem; background-color: #FFF; padding: .5rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .shop-top .shop-logo { width: 2.5rem; height: 2.5rem; overflow: hidden; margin-right: .5rem; } .shop-top .shop-info { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } .shop-top .shop-info .shop-name { font-size: .7rem; } .shop-top .shop-info .shop-join { border: #535353 1px solid; width: 4.1rem; margin-top: .25rem; font-size: 0px; border-radius: .15rem; } .shop-top .shop-info .shop-join .text { font-size: .6rem; height: .9rem; line-height: .9rem; color: #FFF; background-color: #535353; display: inline-block; width: 3rem; text-align: center; overflow: hidden; } .shop-top .shop-info .shop-join .jt { display: inline-block; width: 1rem; height: .9rem; position: relative; overflow: hidden; } .shop-top .shop-info .shop-join .jt:after { position: absolute; content: " "; display: inline-block; width: .3rem; height: .3rem; line-height: .5rem; right: .4rem; top: 50%; border-color: #535353; border-style: solid; border-width: .05rem 0 0 .05rem; -webkit-transform: translate(0, -50%) rotate(135deg); transform: translate(0, -50%) rotate(135deg); } </style> </head> <body> <div class="shop-top"> <div class="shop-logo"> <img src="http://img2.wushang.com/img/2016/11/25/126300080952704867489905.png"> </div> <div class="shop-info"> <div class="shop-name">测试商家</div> <div class="shop-join"> <div class="text">进入店铺</div> <div class="jt"></div> </div> </div> </div> </body> </html>
改过以后
.shop-top{width: 16rem; background-color: #FFF; padding: .5rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .shop-top .shop-logo{width: 2.5rem; height: 2.5rem; overflow: hidden; margin-right: .5rem;} .shop-top .shop-info{ -webkit-box-flex:1; -moz-box-flex:1; -ms-flex:1; -webkit-flex:1; flex:1; } .shop-top .shop-info .shop-name{font-size: .7rem;} .shop-top .shop-info .shop-join{border: #535353 1px solid; width: 4.1rem; margin-top: .25rem; font-size: 0px; border-radius: .15rem; height: 1rem; position: relative; } .shop-top .shop-info .shop-join .text{font-size: .6rem; height: .9rem; line-height: .9rem; color: #FFF; background-color: #535353; display: inline-block; width: 3rem; text-align: center;position: absolute} .shop-top .shop-info .shop-join .jt{display: inline-block; width: 1rem; height: .9rem; position: absolute; right: 0;} .shop-top .shop-info .shop-join .jt:after{position: absolute; content: " "; display: inline-block; width: .3rem; height: .3rem; line-height: .5rem; right: .4rem; top: 50%; border-color: #535353; border-style: solid; border-width: .05rem 0 0 .05rem; -webkit-transform: translate(0,-50%) rotate(135deg); transform: translate(0,-50%) rotate(135deg); }