求大神解答 background position 定位问题及解决为啥我的ul 不能一行过这样子-慕课网

求大神解答 background position 定位问题及解决为啥我的ul 不能一行过这样子

来源：3-14 编程练习

慕粉3675787

2016-12-04 20:51

<!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>

a{text-decoration:none;color:black;}

.topList{

width:300px;

height:180px;

border:1px solid;

color:#E8E8E8;

}

.topList ul{

list-style-type:none;

padding:5px;

}

em{

text-align:center;

font-style:normal;

display:block;

width:20px;

height:16px;

color:#333;

float:left;

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

background-position:0px 16px;

}

.top em{

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

background-position:16px 0px;

}

a :link,a:visted{

text-decoration:none;

color:#000;

}

a:active,a:hover{

color:#f00;

}

</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>

写回答关注

2回答

qq_隔壁少年郎_0

2016-12-27 20:45:55

先添加样式
*{
margin：0px；
padding:0px;
}
再在li的样式表添加margin：12px；font-size:12px;line-height:16px;
因为清除了内外边距，所以之前用到padding和margin属性就需要修改或删除了

0 0
蔡京唐

2016-12-05 10:24:44

其实在这里是因为你的字体太大了，设为12px试试，当然这不是最终效果，后面还有其他问题

0 0