类似这种效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>无标题文档</title>
<style>
.p1{
height:18px;
background-image:url(image/jiao.png);
background-repeat:no-repeat;
background-position:95% 50%;
background-color:#FF0000;
margin-right:10px;
font-size:12px;
line-height:18px;
width:220px;
position:relative;
padding-left:20px;
padding-top:15px;
padding-bottom:15px;
color:#333333;
}
.p1 img{
width:14px;
height:18px;
padding:0 10px 0 0;
margin:0px;
float:left;
}
</style>
</head>
<body>
<p class="p1"><img src="image/address.png" align="middle"/>地址</p>
</body>
</html>
第一步:将箭头作为背景,设置在右边
第二步:控制图片的高度,容器的高度,还有文字的行高度一致。
第三步:将图片设置成浮动在左边