<!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=gb2312"?/>
<title>3.10新聞中心制作評測題</title>
<style?type="text/css">
/*在此定義相關CSS樣式*/
*{margin:0;padding?0;}
.topList{
????width:300px;
????height:180px;
????border:1px?solid?#e8e8e8;
????margin:0?auto;
????}
ul{
????list-style-type:none;
????padding:5px;
}
em{width:20px;
????height:16px;
????text-align:center;
????font-style:normal;
????color:#333;
????display:block;
????background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)?no-repeat?0px?-16px;float:left;}
.top?em{
????background-position:0px?0px;}
a{text-decoration:none;display:block;}
.topList?li{?margin-bottom:10px;}
a:link,a:visited
{
????font-size:12px;
????color:#000;
}
a:hover,a:active
{
????color:#f00;
}
</style>
</head>
<body>
<div?class="topList">
<ul>
<li?class="top"><em>01</em>
<p><a?href="http://idcbgp.cn/"?>【慕客訪談用戶篇】“有為屌絲”在路上</a></p>
</li>
<li?class="top"><em>02</em>
<p><a?href="http://idcbgp.cn/">【有獎活動】給父親的三行書信</a></p>
</li>
<li?class="top"><em>03</em>
<p><a?href="http://idcbgp.cn/">《程序猿，請曬出你的童年》活動獲獎公告</a></p>
</li>
<li><em>04</em>
<p><a?href="http://idcbgp.cn/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p>
</li>
<li><em>05</em>
<p><a?href="http://idcbgp.cn/">【獲獎公告】追“球”巔峰，爭當“預言帝”</a></p>
</li>
<li><em>06</em>
<p><a?href="http://idcbgp.cn/">【問卷調(diào)查】慕課網(wǎng)用戶學習情況大調(diào)查</a></p>
</li>
</ul>
</div>
</body>
2016-10-02
這么說吧，字體的默認對齊是baseline，但是隨字體的大小改變，相對其他元素會就產(chǎn)生不對齊，這里取巧的的話在li設置統(tǒng)一的行高，還有就是inline元素對齊方式的改變