html li 图片与文字对齐

html-css012

html li 图片与文字对齐,第1张

在html中让图片和文本对齐，这个的话，你可以将图片和文本放到2个div中然后用一个div包裹着，给那2个div设置float属性，当然宽度，高度是不能少的，然后在使用margin使这2个有点间隔，这里我提交一段代码：

<html>

<head>

<title>图片和文本的对齐</title>

</head>

<body>

<div>

<div style='flaot:leftwidth:330pxheight:200px'>

<img src='图片地址'>

</div>

<div style='flaot:leftwidth:330pxheight:200pxmargin-left：30px'>

<p>我是右边的测试文字</p>

</div>

</div>

</body>

</html>

直接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)}