html中li显示的这样几张图片,怎么让他们适应不同分辨率的手机居中显示

html-css017

html中li显示的这样几张图片,怎么让他们适应不同分辨率的手机居中显示,第1张

直接float就可以了

ul, ul li{

box-sizing:border-box

-moz-box-sizing:border-box

-webkit-box-sizing:border-box

}

ul li{display:inlinefloat:leftwidth:50%height:100pxpadding:0 10px}

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

可以这么写试试看,图片直接设置为display:block如果宽度是根据窗口缩放的话,可以直接设置为100%;如果定宽就写margin:0 auto图片就是居中的。

给li添加背景图片。如果是相同的话,可以直接用

ul li{backgorund:url(xx.jpg)}

不同的话,要单独给li加样式,如

.li1{backgorund:url(xx.jpg)}

.li2{backgorund:url(xx.jpg)}