li下沉 margin-top越界 浮动带来的影响
使用li嵌套实现的二级导航菜单,在IE浏览器下显示正常,而在谷歌及360极速模式下最后的几个li标签下沉了,其实在webkit内核的浏览器中都会有这种情况,如下图:
出现此种状况,有两种可能:
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为负值;
li下沉 margin-top越界 浮动带来的影响的更多相关文章
- float---浮动带来的影响与清除浮动带来的影响方法----在路上(20)
使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...
- 为什么设置overflow为hidden可以清除浮动带来的影响
1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- 详解为什么设置overflow为hidden可以清除浮动带来的影响
1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...
- 《----css样式---------浮动带来的影响与解决方法---------------》
浮动就是让我们的元素脱离标准文档流,目的是为了布局好看! 浮动的现象: 脱离标准文档流被叫做脱流,同时会出现字围现象. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一 ...
- li里的a标签浮动了,为什么li本身也浮动了?
<ul> <li><a href="#"></a></li> <li><a href="#& ...
- 如何清除浮动(float)所带来的影响
清除浮动(float) 1.定义和用法 在w3c中给了浮动这样的定义. "float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素 ...
- 解决float浮动带来的父元素高度没有的问题---清除浮动
float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...
- [css]浮动造成的影响
浮动造成的影响: 子元素浮动,父元素无法被撑出高了. 如果要给父元素做通栏background? 如果两个box的子元素都浮动,且希望两个box分行显示? box1 box2 box3: float: ...
随机推荐
- ubuntu 修改终端命令显示的颜色
转于 http://www.blogbus.com/riusksk-logs/62891140.html 修改当前用户 gedit ~/.bashrc 在最后一行下面添加这行 PS1='${debi ...
- WIN7(VISTA)系统无法上网问题排查方法
WIN7(VISTA)系统无法上网问题排查方法 一.无法通过DHCP自动获取到IP 1. 确认正确配置路由器的DHCP功能 a.一般租期建议设置为1-3小时,推荐设置1小时. b.DHCP地址池不要和 ...
- Lucas定理模板
用于大组合数对p取模的计算. #include <cstdio> #include <iostream> #include <cmath> #include < ...
- Zend Debugger 配置
到官网 http://www.zend.com/en/products/studio/downloads 下载 windows 版 Studio Web Debugger 打开下载得到的压缩包,里面有 ...
- ACM题目————二叉树的遍历
一.二叉树的后序遍历: 题目描述 给定一颗二叉树,要求输出二叉树的深度以及后序遍历二叉树得到的序列.本题假设二叉树的结点数不超过1000 输入 输 入数据分为多组,第一行是测试数据的组数n,下面的n行 ...
- 【转】成功在AMD主机上用虚拟机安装原版雪豹
转载地址:http://www.jzh.me/archives/205.html/comment-page-1 一直都很想安装苹果的系统,当雪豹出来的时候就更加想了,但是自己的机器是AMD的,而且还是 ...
- Paratroopers
Paratroopers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7881 Accepted: 2373 Descript ...
- MUI 微信 和支付宝支付 (前台代码)
<!-- 校园公告详情界面 用于显示校园公告的详情信息 在校园公告界面点击某一条目后 进入本界面查看详情 --> <!DOCTYPE html> <html> &l ...
- 【Eclipse】安装subclipse的Eclipse插件
下载地址 subclipse subclipse Download and Install 一般来说,有两种方式:在线安装.离线包安装. 离线包安装 这里记录的是离线包的安装方式: 下载好离线包 He ...
- TCP、UDP
双方都是一种网络传输协议 2.TCP需要建立连接,而UDP不需要建立连接(无连接传输) 3.是否建立真实连接的特性,造成了双方可靠性的差距. TCP属于可靠的传输协议:因为传输前双方建立好了连接,相当 ...