<!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?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>3.10新聞中心制作評測題</title>
<style?type="text/css">
????*{
????????margin:0;
????????padding:0;
????}
????.topList{
????????width:300px;
????????margin:0?auto;
????????height:190px;
????????border:1px?solid?#E8E8E8;
????}
????.topList?ul{
????????list-style:none;
????????padding:5px;
????????font-size:12px;
????}
????.topList?li{
????????height:30px;
????????line-height:30px;
????}
????em{
????????display:inline-block;
????????width:20px;
????????height:16px;
????????font-style:normal;
????????text-align:center;
????????color:#333;
????????float:left;
????????background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)?no-repeat?0?-16px;
????}
????.top?em{
????????background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)?no-repeat?0?0;
????}
????a{
????????text-decoration:none;
????}
</style>
</head>
<body>
????<div?class="topList">
????????<ul>
????????????<li?class="top"><em>01</em>
????????????????<p><a?href="http://www.xianlaiwan.cn/"?>【慕客訪談用戶篇】“有為屌絲”在路上</a></p>
????????????</li>
????????????<li?class="top"><em>02</em>
????????????????<p><a?href="http://www.xianlaiwan.cn/">【有獎活動】給父親的三行書信</a></p>
????????????</li>
????????????<li?class="top"><em>03</em>
????????????????<p><a?href="http://www.xianlaiwan.cn/">《程序猿，請曬出你的童年》活動獲獎公告</a></p>
????????????</li>
????????????<li><em>04</em>
????????????????<p><a?href="http://www.xianlaiwan.cn/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p>
????????????</li>
????????????<li><em>05</em>
????????????????<p><a?href="http://www.xianlaiwan.cn/">【獲獎公告】追“球”巔峰，爭當“預言帝”</a></p>
????????????</li>
????????????<li><em>06</em>
????????????????<p><a?href="http://www.xianlaiwan.cn/">【問卷調查】慕課網用戶學習情況大調查</a></p>
????????????</li>
????????</ul>
????</div>
</body>
2016-09-26
em{
margin-top:8px;
line-height: 16px;}
或者你再調一下margin-top 8是不是太下去了?
2016-09-28
我給你答案不完全對,你的li標簽里，你設置的height和line-height的問題 你把line改小一點就行了，
不用在em里再寫一個line-height。你設置的30行高，文字直接在30這個高度里居中，改為16px 就在16px這個高度居中
2016-09-26
能解釋下為什么設置line-height就可以把文字頂上去嗎？這點比較困惑哦。
.topList?li{ ????????height:30px; ????????line-height:30px; ????} em{ ????????display:inline-block; ????????width:20px; ????????height:16px; ????????font-style:normal; ????????text-align:center; ????????color:#333; ????????float:left; ????????background:url(http://img.imooc.com/53cf0fa20001d3dc00200032.jpg)?no-repeat?0?-16px; ????}2016-09-26
垂直居中我也不會。
2016-09-26
margin-top:8px;
line-height: 16px;