html li float,css-2:margin-top不起效与li标签float后布局变乱
editor:迪斌仔
time:2014-4-6
此文乃迪斌仔原创,转载请以链接方式注明出处。
真正写起来,好多还是不明所以,只得将实践结果暂时记录下来,以供以后参考。
一、margin-top不起效
这新浪博文里不能贴带html标签的代码,不能不称之为一大遗憾。只好截图了。
图中主要有5个兄弟div,它们共一个父div。
具体情况:第一行、第二行为头两个div。接下来的灰色框是第三个div,红色为第四个div,黄色为第五个div。
灰色框采用了float:left,红色框也采用了float:left,这正如我在css-1:div块运用float后的效果
博文中第一种情况里的第四条所示。
我的问题:在黄色div里,我设置了clear:both,然后设置margin-top,如图所示,丝毫不起作用。用padding- top可解决内容的距离问题,但解决不了边界距离问题。
解决方案:百度后,发现好多这种类似问题的解决方法,试了几个,都不得效果。最终采用了这样的方法:在黄
色div前再加个空div,定义其class为clear。然后在css样式表里添加如下内容:
.clear{
width:1px;
height:0;
clear:both;
}
二、li标签float后布局变乱
具体情况:就是上图中灰色框里内容,我采用的是ul-li,然后将第基数个li标签设置为float:left。这样做在
FF上显示正常,可是在IE下就乱了,红色框就会换到下一行,甚至上图左边的菜单(未贴)会移到上
图正下方。至于原因,我纳闷得很。
我的问题:我把ul整体一撤除,网页正常。但我一放进去,IE8上网页就乱套了。肯定跟其中li的float:left有
关系,但如何解决呢?
解决方案:紧接着ul后加个如上的空div。
html li float,css-2:margin-top不起效与li标签float后布局变乱相关推荐
- css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法 发布时间:2020-06-25 10:53:17 来源:亿速云 阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
- 在才开始进入前端这个坑的时候 在布局中会遇到很多问题 我才入这个坑的时候 在margin top 中遇到几个bug 我分享一下...
margin top的bug 当子元素和父元素是纯元素 没有内容的时候,我们去调整子元素的margin:top, 他会误以为是要调整父元素 解决方案: 1.给父元素设置一个边框 2.父元素加overf ...
- html怎么设置左偏移量,CSS中margin属性的偏移量详解(代码示例)
本篇文章给大家介绍一下CSS中margin属性的偏移量,有感兴趣的朋友可以看一看. 话不多说,我们直接进入正题~ 我们先来看一个具体的例子(相关推荐:CSS学习手册) 代码入下:HTML文件和CSS文 ...
- html修改li大小,css为li设置不同宽度
在开发过程中,会碰到一些选择器的需求:例如使列表中的第一项或者最后一项显示不同的样式 .列表中的奇数或者偶数项显示不同的背景色 . . . 等等.我们可以通过 CSS 来实现这样的效果,CSS 给我们 ...
- html5中margin是什么意思,css中margin是什么意思,margin作用是什么?
一.介绍,什么意思? margin为对象外边距间隔属性.如果对一个对象比如div设置了边框后,再设置margin就会观察到这个div外面产生了间距边距. margin作用: 设置对象与其它对象的外边距 ...
- C语言margin的作用是,css中margin是什么意思,margin作用是什么
一.简介,甚么含义? margin为对象外边距间隔属性.假如对一个对象比方div配置了边框后,再设置margin就会察看到这个div外面孕育发生了间距边距. margin感导: 设置对象与此外对象的外 ...
- HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
- 在html中设置margin属性,css中margin的4个属性
CSS中:margin:auto与margin: 0 auto;有什么区别 CSS中:margin:auto与margin: 0 auto;有什么区别.有的网站中写的是前者意思不同.margin:au ...
- html 清除float,css中如何清除float
css中清除float的方法是,为父元素设置[overflow:auto].设置之后,内容元素会被修剪,超出元素将不可见.我们还可以通过增加空标签,或者使用[:after]伪元素来清除float. 本 ...
最新文章
- Python学习之While语句小游戏
- VTK:InfoVis之XGMLReader
- Android学习之PopupWindow
- c mysql 查询超时设置_MySQL查询超时的设置方法
- 基础知识(三)makefile文件编写初级篇
- python opencv旋转图片_opencv3+python3进行图片旋转处理
- linux p 参数,tar的-p参数解决方案
- 炸了!亚马逊薪资文件泄露!原来这么多人年薪百万
- RedHat 5.4+ Postfix +Extmail实现基于虚拟用户的邮件系统(三)
- Power Tools for TFS 11 Beta
- Android5.1打开Emmagee显示错误
- 请假通知(8-17~8-19)
- scratch编程小游戏咬指大冒险
- 计算机课程word教学,浅谈计算机Word表格的制作课程教学
- MySQL多表事务(三)
- 《Windows 8 权威指南》——2.5 Windows 8 Metro应用内存回收机制
- 快捷安装Mac系统下安装/卸载brew
- 无线耳机的分类和技术特点
- Nachos系统简介
- 双塔模型DSSM及各种变体塔
热门文章
- linux ip转发 丢包,高并发下iptables丢包导致网络变慢解决方法
- app账号退不出去_摩拜App告别江湖!停止服务和运营后要用车怎么办?操作指南...
- 人类自主行动背后的本质和具身人工智能未来的发展
- 娱乐营销是什么,娱乐营销一般怎么做?
- thymeleaf中th:attr
- 感染[熊猫烧香变种 spoclsv.exe]
- win10雷电3接口驱动_微软宣布支持 Windows 10 支持雷电接口,PC 的雷电音频接口春天即将到来?...
- java 传真x2fax_需要帮助开始通过Java将原始G3传真文件转换为TIFF格式
- MySQL| MySQL分组函数
- Quicker配置打开蓝牙设置页面、控制面板等系统页面