                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /企業網站綜合布局實戰

求大神看看啊

.topList{width:300px; height:180px;border:1px solid #e8e8e8;}

? .topList ul{ list-style:none;width:100%;overflow:hidden;float:right;margin:-6px;}

.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里的塊元素把父元素撐開了？可是我設置了float浮動屬性

-----------------------------------------------------------------------------

又試驗了一下，我之前是設置了overflow的所以應該是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;}

.topList ul li a{text-decoration:none;color:#333;font-size:12px;}

改了之后的代碼。

霍丶

2016-08-06

源自：企業網站綜合布局實戰 3-14

關注問題我要回答

903

操作

收起

2 回答

kking_xyz 回答被采納 +3 積分
2016-08-07

建議：以后寫CSS的時候，記著在開頭先清除默認樣式：* { margin:0; padding:0; }

你這個在開頭清除默認樣式后，ul的margin值就不需要設置了，然后給ul設置一個行高。

下面這段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>

2 回復有任何疑惑可以回復我~

收起回答

霍丶提問者

恩恩，我開頭加上請出樣式，確實解決了謝謝！

2016-08-07 回復有任何疑惑可以回復我~

慕粉4282285
2016-11-04

我沒有清楚默認樣式（實際上是我一開始忘了- -），然后根據自己的想法寫了一段，效果基本相同，可以參考下

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

0 回復有任何疑惑可以回復我~

收起回答