background-position定位怎么实现的？？？？

源自：3-14 编程练习

background-position定位怎么实现的？？？？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>3.10新闻中心制作评测题</title>

/*在此定义相关CSS样式*/

*{margin:0px;padding:0px;}

.topList{

font-family:"微软雅黑";

font-size:14px;

width:350px;

height:180px;

border:1px solid #ccc;

}

.topList ul{

list-style-type:none;

height:30px;

}

.topList li{

height:30px;

line-height:30px;

}

.topList em{

font-style:normal;

float:left;

background:url( http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat;

background-position:0px 7px;

}

/*我用下面这种方法可以实现应该实现的效果，但是用上面background-position却怎么都想不通？？？不知道怎么写了，求助

.topList em{

font-style:normal;

float:left;

background:url( http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat;

height:16px;

line-height:16px;

margin:7px 7px;

}

.topList li a:link,.topList li a:visited{

text-decoration:none;

color:#000;

}

.topList li a:hover,.topList li a:active{

text-decoration:none;

color:pink;

}

</style>

</head>

<body>

<ul>

<li class="top">01

<a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a>

</li>

<li class="top">02

<a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a>

</li>

<li class="top">03

<a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a>

</li>

<li>04

<a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a>

</li>

<li>05

</li>

<li>06

<a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a>

</li>

</ul>

</div>

</body>

还有看见有同问的em用float属性后怎么没有覆盖p中的文字呢

提问者：慕粉1469604703 2016-09-27 10:00

background-position定位怎么实现的？？？？

个回答