li下沉 margin-top越界 浮动带来的影响
2015-12-15 18:52
274 查看
使用li嵌套实现的二级导航菜单,在IE浏览器下显示正常,而在谷歌及360极速模式下最后的几个li标签下沉了,其实在webkit内核的浏览器中都会有这种情况,如下图:
![](http://s14.sinaimg.cn/mw690/6e9bca5btx6DxvsguQd3d&690)
出现此种状况,有两种可能:
1、导航条的宽度不够,使得最后的几个li标签容纳不下,因此错行下沉,此时只需调整导航条和li标签的宽度;
2、横排的导航条是通过li标签设置浮动实现的,即li标签的float属性,当设置li浮动而其所在的ul标签未设置浮动时也会出现此种状况,此时只需为li所在的ul设置float属性即可;为固定导航条的位置,可通过div标签先将位置固定,再使用ul li标签设置浮动实现;
经测试,我的网站属于第二种情况,所以设置浮动时,尽量一个div中的子元素都设置浮动,不要设一部分。
不行就是margin-top越界使用伪元素清除浮动
.header:after,.sec_head:after,.sec_img:after,section:after,
.header:before,.sec_head:before,.sec_img:before,section:before{content:"";display:table;clear:both;}
这里的元素是当前元素和受影响的元素
或者设置margin-top为负值;
出现此种状况,有两种可能:
1、导航条的宽度不够,使得最后的几个li标签容纳不下,因此错行下沉,此时只需调整导航条和li标签的宽度;
2、横排的导航条是通过li标签设置浮动实现的,即li标签的float属性,当设置li浮动而其所在的ul标签未设置浮动时也会出现此种状况,此时只需为li所在的ul设置float属性即可;为固定导航条的位置,可通过div标签先将位置固定,再使用ul li标签设置浮动实现;
经测试,我的网站属于第二种情况,所以设置浮动时,尽量一个div中的子元素都设置浮动,不要设一部分。
不行就是margin-top越界使用伪元素清除浮动
.header:after,.sec_head:after,.sec_img:after,section:after,
.header:before,.sec_head:before,.sec_img:before,section:before{content:"";display:table;clear:both;}
这里的元素是当前元素和受影响的元素
或者设置margin-top为负值;
相关文章推荐
- Linux下DG环境的搭建及升级(step by step)
- Linux内核构造数据包并发送(Netfilter方式)
- 为Debian 8 的iceweasel浏览器安装flash player
- 用一句话理解Docker
- POJ-1157 LITTLE SHOP OF FLOWERS(动态规划)
- POJ-1157 LITTLE SHOP OF FLOWERS(动态规划)
- Centos+Nginx+PHP7.0编译安装(和PHP5.6老版本共存)
- openwrt启动过程(脚本)
- hadoop2.0 HA高可用笔记和搭建流程
- Linux Top 命令解析 比较详细(转)
- Linux添加/删除用户和用户组
- 创建Web项目的Docker镜像
- lINUX例行性计划任务
- web网站防攻击策略
- tomcat 配置
- Online网站集
- Linux-CentOS 安装配置ExifTool
- opencv学习笔记一
- 一次用bash+python分析NGINX日志的记录
- linux下使用JMX监控tomcat