H5如何实现一行三列布局

<! DOCTYPE html > < html  lang ="en" >< head >
         < meta  charset ="UTF-8" >
         < title >Document </ title >
         < meta  content ="yes"  name ="apple-mobile-web-app-capable" >
         < meta  content ="yes"  name ="apple-touch-fullscreen" >
         < meta  content ="telephone=no"  name ="format-detection" >
         < meta  content ="black"  name ="apple-mobile-web-app-status-bar-style" >
         < meta  name ="viewport"  content ="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
         < link  rel ="stylesheet"  type ="text/css"  href ="css/mobile.common.css" >
         < style  type ="text/css" >
                .list_icons{  margin-top:  3.333333%;  padding-left:  3.33333% }
                .list_icons li{  width:  30%;  background:  #fff;  float:  left;  margin:  0 3% 3% 0; border:  1px solid #dadfe9; padding-bottom:  0.900rem;}
                .list_icons span{  display:  block;  width:  1.120rem;  height:  1.355rem;  margin:  0 auto;  margin-top:  0.900rem;  }
                .list_icons i{ font-size:  0.747rem;  color:  #4a4a4a;  text-align:  center;  font-style:  normal; display:  block;  padding-top:  0.500rem;  margin:  0 auto;}
         </ style ></ head >< body >
         < ul  class ="list_icons clearfix" >
        < li >
             < span  style ="padding-top: 0.230rem;" >< img  src ="images/1_ssd.png" /></ span >
             < i >时速达 </ i >
        </ li >
        < li >
             < span  style ="padding-top: 0.230rem;" >< img  src ="images/2_fl.png" /></ span >
             < i >福利 </ i >
        </ li >
        < li >
             < span  style ="width: 1.067rem; padding-top: 0.255rem;" >< img  src ="images/3_tm.png" /></ span >
             < i >特卖 </ i >
        </ li >
        < li >
             < span  style ="width: 0.827rem" >< img  src ="images/4_hfcz.png" /></ span >
             < i >话费充值 </ i >
        </ li >

        < li >
             < span  style ="width: 1.360rem" >< img  src ="images/5_jtbj.png" /></ span >
             < i >家庭保洁 </ i >
        </ li >
    </ ul >

</ body ></ html >

转载于:https://www.cnblogs.com/xiaoleidiv/p/5478261.html