记录一次CSS clear属性的教训。
最开始,需要清除float:left对后面元素带来的布局影响。
在我的CSS里,就理所当然的写下了这一段clear
CSS代码:
.clear{
clear:both;/*清除浮动*/
}
/*顶部导航栏*/
#topNav{
position: relative;
margin-top: -26px;
padding-left: 250px;
background-color: rgba(50, 48, 50, 0.5);
}
#topNav ul{
margin-top: 32px;
width:100%;
list-style:none;
}
#topNav ul li{
padding: 10px;
min-width: 80px;
float: left;
color: white;
list-style: none;
font-size: 0.8em;
font-family: '宋体';
text-decoration: none;
text-align: center;
}
HTML代码:
<div id="topNav">
<ul>
<li onclick="nav('blog')">博客</li>
<li onclick="nav('bookmark')">精华书签</li>
<li onclick="nav('source')">文件资源</li>
<li onclick="nav('lab')">自研实验室</li>
<div class="clear"></div>
</ul>
</div>
在谷歌浏览器上看上去一切都没问题,各种屏幕适配也都OK
但在自己的荣耀V9 上就是有问题。
左边空出来的一片特别扎眼,尝试改过li 的margin、div的margin,left也调试过,但都不是解决问题的根本方法。这期间各种调试都没没错。直到刚才吃饭后,猛地发现,左边空出来的这一块怎么和导航栏左边对上了。顺着这思路,检查完每个属性和参数,目光焦距在了clear上。在css后添上了两行高宽后。
/*其他样式*/
.clear{
clear:both;/*清除浮动*/
width:0px;
height:0px;
}
问题瞬间解决,泪崩。
使用clear一定不要忘记加上宽高属性。。。。。
博客重建地址:www.cnkizy.com