求大神看看啊
.topList{width:300px; height:180px;border:1px solid #e8e8e8;}
? .topList ul{ list-style:none;width:100%;overflow:hidden;float:right;margin:-6px<!--為什么我這里要寫負(fù)數(shù)才能對齊。。求大神幫忙看看?。?->;}
.top em{background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat;color:white;}
em{float:left;width:20px;height:16px;background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat;background-position:bottom;font-family:"Microsoft Yahei";font-size:12px;font-style:normal;text-align:center;}
.topList ul li a{text-decoration:none;color:#333;font-size:12px;}
----------------------------------------------------------------------------------------------
后來想了想是不是em里的塊元素把父元素?fù)伍_了？可是我設(shè)置了float浮動屬性
-----------------------------------------------------------------------------
又試驗了一下，我之前是設(shè)置了overflow的 所以應(yīng)該是em塊把父元素給撐開了，大神有沒有來解釋一波的？
---------------------------------------------------------------------------------------------------------
*{margin:0;padding:0;}
.topList{width:300px; height:180px;border:1px solid #e8e8e8;}
.topList ul{
? ? margin-left:10px;
}
? ?.topList ul li{ list-style:none;width:100%;float:right;margin-top:12px;}
.top em{background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat;color:white;}
em{float:left;width:20px;height:16px;background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat;background-position:bottom;font-family:"Microsoft Yahei";font-size:12px;font-style:normal;text-align:center;}
.topList ul li a{text-decoration:none;color:#333;font-size:12px;}
改了之后的代碼。
2016-08-07
建議：以后寫CSS的時候，記著在開頭先清除默認(rèn)樣式：* { margin:0; padding:0; }
你這個在開頭清除默認(rèn)樣式后，ul的margin值就不需要設(shè)置了，然后給ul設(shè)置一個行高。
下面這段CSS給你參考一下
<style?type="text/css"> *{margin:0;?padding:0;} .topList{ ????width:300px; ????height:180px; ????border:1px?solid?#e8e8e8; ????margin:0?auto; } .topList?ul{ ????list-style-type:none; ????padding:5px; } .topList?ul?li?{ ????height:28px; } .topList?ul?li?a{ ????text-decoration:none; ????padding-left:px; ????font-size:12px; ????color:#666; } .topList?ul?li?em{ ????display:block; ????float:left; ????width:20px; ????height:16px; ????line-height:16px; ????font-size:14px; ????text-align:center; ????font-style:normal; ????color:#333; ????background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)?no-repeat?0?-16px; } .topList?.top?em{ ????color:#fff; ????background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)?no-repeat; } </style>2016-11-04
我沒有清楚默認(rèn)樣式（實(shí)際上是我一開始忘了- -），然后根據(jù)自己的想法寫了一段，效果基本相同，可以參考下
<style?type="text/css"> .topList?{ ????width:?300px; ????height:?180px; ????border:?1px?solid?#E8E8E8; ????font-size:?13px; ????line-height:?17px; } ul?{ ????list-style-type:?none; ????padding:?5px; ????margin-top:?-10px; } ul?li?a?{ ????display:?bold; ????text-decoration:?none; ????color:?#333; } ul?p?{ ????letter-spacing:?-1px; } ul?em?{ ????display:?block; ????float:?left; ????width:?20px; ????height:?16px; ????font-style:?normal; ????background:?url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)?no-repeat; ????text-align:?center; ????color:?white; ????font-weight:?bold; } .gray?{ ????background:?url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)?no-repeat; ????background-position:?bottom; ????color:?#333; } </style>