<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>inline-block使用</title> <style> :not(input, textarea) { -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-text-size-adjust: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", arial, Tahoma, SimSun, sans-serif; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline } html { font-size: 50px; height: 100% } .demo { margin: .3rem; } .demo .row { font-size: 0; } .demo .row span { display: inline-block; vertical-align: middle; height: .4rem; } .demo .ico { width: 0.4rem; background: url(http://static.58.com/lbg/personcenter/dist/images/shop@2x.png) no-repeat center; background-size: 100%; margin-right: 0.2rem; } .demo .company { font-size: 0.26rem; color: #333333; letter-spacing: 0; margin-right: 0.1rem; } .demo .arrow { height: .22rem !important; width: .22rem; background: url(http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png) no-repeat top center; background-size: 100%; } .demo .calltime { font-size: 0.26rem; color: #333333; float: right; } .demo1 span, .demo1 img { vertical-align: middle; outline: .01rem solid red; } .demo1 { margin: .3rem; } .demo1 .row { font-size: 0; outline: .01rem solid green; } .demo1 .ico { height: .4rem; width: .4rem; } .demo1 .company { font-size: 0.26rem; color: #333333; margin-right: 0.1rem; } .demo1 .arrow { height: .22rem !important; width: .22rem; } .demo1 .calltime { font-size: 0.26rem; color: #333333; float: right; } .demo2 { margin: .3rem; } .demo2 .row { display: flex; align-items: center; font-size: 0; outline: .01rem solid green; } .demo2 img, .demo2 span { outline: .01rem solid red; } .demo2 .ico { height: .4rem; width: .4rem; } .demo2 .company { font-size: 0.26rem; color: #333333; margin-right: 0.1rem; } .demo2 .arrow { height: .22rem; width: .22rem; } .demo2 .calltime { font-size: 0.26rem; color: #333333; } .demo3 { margin: .3rem; } .demo3 .row { font-size: 0; padding:.2rem 0; background:#f3f3f3; margin-bottom:.2rem; } .demo3 .row .shop { font-size: 0.26rem; color: #333333; text-decoration: none; } .demo3 .row .shop::before { content: ''; display: inline-block; vertical-align: -.1rem; width: .4rem; height: .4rem; background: url(http://static.58.com/lbg/personcenter/dist/images/shop@2x.png) no-repeat; background-position: top left; background-size: 100%; margin-right: .2rem; } .demo3 .row .shop::after { content: ''; display: inline-block; vertical-align: middle; width: .22rem; height: .22rem; background: url(http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png) no-repeat; background-position: top left; background-size: 100%; margin-left: .1rem; } .demo3 .row .calltime { float: right; font-size: 0.26rem; color: #333333; } </style> </head> <body> <div class="demo"> <div class="row"> <span class="ico"></span> <span class="company">该商家暂无店铺</span> <span class="arrow"></span> <span class="calltime">通话时长2分28秒</span> </div> <div class="row"> <span class="ico"></span> <span class="company">该商家暂无店铺</span> <span class="arrow"></span> <span class="calltime">通话时长2分28秒</span> </div> <div class="row"> <span class="ico"></span> <span class="company">该商家暂无店铺</span> <span class="arrow"></span> <span class="calltime">通话时长2分28秒</span> </div> </div> <div class="demo1"> <div class="row"> <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt=""> <span class="company">该商家暂无店铺</span> <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt=""> <span class="calltime">通话时长2分28秒</span> </div> <div class="row"> <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt=""> <span class="company">该商家暂无店铺</span> <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt=""> <span class="calltime">通话时长2分28秒</span> </div> <div class="row"> <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt=""> <span class="company">该商家暂无店铺</span> <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt=""> <span class="calltime">通话时长2分28秒</span> </div> </div> <div class="demo2"> <div class="row"> <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt=""> <span class="company">该商家暂无店铺</span> <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt=""> <span class="calltime">通话时长2分28秒</span> </div> <div class="row"> <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt=""> <span class="company">该商家暂无店铺</span> <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt=""> <span class="calltime">通话时长2分28秒</span> </div> <div class="row"> <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt=""> <span class="company">该商家暂无店铺</span> <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt=""> <span class="calltime">通话时长2分28秒</span> </div> </div> <div class="demo3"> <div class="row"> <a class="shop" href="http://m.58.com">该商家暂无店铺</a> <span class="calltime">通话时长2分28秒</span> </div> <div class="row"> <a class="shop" href="http://m.58.com">该商家暂无店铺</a> <span class="calltime">通话时长2分28秒</span> </div> </div> </body> </html>