求大神看看啊

源自：3-14 编程练习

求大神看看啊

.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://img.mukewang.com/53cf0fa20001d3dc00200032.jpg)no-repeat;color:white;}

em{float:left;width:20px;height:16px;background:url(http://img.mukewang.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://img.mukewang.com/53cf0fa20001d3dc00200032.jpg)no-repeat;color:white;}

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

改了之后的代码。

提问者：霍丶 2016-08-06 18:28

个回答

kking_xyz: 2016-08-07 10:43:31

已采纳

建议：以后写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://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat 0 -16px;
}
.topList .top em{
    color:#fff;
    background:url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat;
}
</style>

慕粉4282285: 2016-11-04 14:53:33

我没有清楚默认样式（实际上是我一开始忘了- -），然后根据自己的想法写了一段，效果基本相同，可以参考下

<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://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat;
    text-align: center;
    color: white;
    font-weight: bold;
}

.gray {
    background: url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat;
    background-position: bottom;
    color: #333;
}

</style>