                        课程
                    
                        /前端开发
                        
                            /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

关注问题我要回答

843

操作

收起

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 回复有任何疑惑可以回复我~

收起回答