li浮动时ul高度为0,解决ul自适应高度的几种方法
网址:http://www.gxchina.com/edu/11208.html
1.给ul元素设置高度height
最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下:
ul {
    list-style-type: none;
    height: 30px; /*添加高度属性*/
}
次方法有个缺点:就是元素的高度不能自适应内容。
2.添加一个空的div
添加一个空的div,这个div和浮动元素同一级别,且位于浮动元素的最后。这个方法必须要为这个div添加一个clear:both属性,代码如下:
<ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
<div style="clear:both;"></div> <!--新添加的空div,它和浮动元素同一级别,且位于最后-->
</ul>
3.添加zoom属性,适用于IE
IE支持一个CSS属性zoom,当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。设置为zoom:1,代码如下:
ul {
    list-style:none;
    zoom:1; /* 适用于IE */
}
li浮动时ul高度为0,解决ul自适应高度的几种方法的更多相关文章
- 两段超简单jquery代码解决iframe自适应高度问题(不用判断浏览器高度)
		
这里介绍两个超级简单的方法,不用写什么判断浏览器高度.宽度啥的.下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的.注意别放错了地方.iframe的代码 ...
 - after及before伪元素及解决父元素塌陷的几种方法
		
一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...
 - IOS7.0 UILabel实现自适应高度的新方法
		
//IOS7.0中利用- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attri ...
 - iOS:解决UITextView自适应高度粘贴大量文字导致显示不全的问题
		
一.描述 在UITextView输入框中粘贴大量的文字时,UITextView内容自适应高度计算出现误差,导致整块文字上移消失. 二.方案 在UITextView文字改变的监听中添加如下方法即可. [ ...
 - 【Cocos2d-x游戏开发】解决Cocos2d-x中文乱码的三种方法
		
众所周知,Cocos2d-x是一款不错的开源引擎,但是在Cocos2d-x中直接使用中文是无法正确显示的.比如下面的情况: 解决这个问题常用的有三种方法:1.通过转换为UTF-8编码来显示.2.使用i ...
 - [moka同学笔记]yii2.0小物件的简单使用(第一种方法)
		
这是第一种方法,还有另一种方法,其实都差不多. 1.在创建widgets\HelloWiget.php <?php /** * Created by PhpStorm. * User: Admi ...
 - Android内存管理(5)*官方教程:Logcat内存日志各字段含义,查看当前内存快照,跟踪记录内存分配,用adb查看内存情况时各行列的含义,捕获内存快照的3种方法,如何让程序暴漏内存泄漏的方法
		
Investigating Your RAM Usage In this document Interpreting Log Messages 内存分析日志中各消息的含 ...
 - 解决android 大图OOM的两种方法
		
最近做程序中,需要用到一张大图.这张图片是2880*2180大小的,在我开发所用的华为3C手机上显示没有问题,但是给米3装的时候,一打开马上报OOM错误.给nexus5装,则是图片无法出来,DDMS中 ...
 - Maven 知识点总结以及解决jar报冲突的几种方法
		
1.常见的命令 Compile Test Package Install Deploy Clean 2.坐标的书写规范 groupId 公司或组织域名的倒序 artifactId 项目名或模块名 ve ...
 - VC6.0加载lib文件的三种方法
		
MFC编写程序,都要用到动态链接库,MFC相关的动态库有MFCD42和MFC42等,MFC框架程序已经自动加载,那么如何引入第三方的动态链接库到工程中呢? 静态链接库是要先把程序中所需要使用的函数编译 ...
 
随机推荐
- C#基础1:Console类
			
Console相关: 1.输出到控制台 Console.Write(输出的值); 表示向控制台直接写入字符串,不进行换行,可继续接着前面的字符写入.Console.WriteLine(输出的值) ...
 - centos6.5 安装ansible,管理多台服务器
			
安装python(最低2.6v) (1).python2.7安装 wget https://www.python.org/ftp/python/2.7.8/Python-2.7.8.tgz # tar ...
 - Aa3.0 事件机制
			
说明:本文由多处网络文章整理而成,在此未一一注明原文链接,敬请谅解! AS3:事件流机制 事件流 只要发生事件,Flash Player就会调度该事件对象. 如果事件目标不在显示列表中,则Flash ...
 - 四步安装typecho(LNMP环境)
			
##1 安装nginx,mysql,php环境 sudo apt-get install nginx php5-fpm php5-cgi php5-cli php5-curl php5-gd php5 ...
 - sql server 2008 R2 压缩备份数据库
			
今天需要把一个省外项目的数据库从服务器上备份.拷贝到本机(跨地域传输数据库备份文件). 连上VPN,通过远程桌面连接,连接上服务器,发现数据库文件已经有20G以上大小了. 文件太大,公司网络也不稳定, ...
 - 图片的 base64 编码
			
图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...
 - zstu 4214 高楼扔鸡蛋(google 面试题)dp
			
input T 1<=T<=10000 n m 1<=n<=2000000007 1<=m<=32 output m个鸡蛋从1到n哪一楼x扔下去刚好没碎,而再x+1 ...
 - 二十六、oracle pl/sql 分页
			
一.无返回值的存储过程 古人云:欲速则不达,为了让大家伙比较容易接受分页过程编写,我还是从简单到复杂,循序渐进的给大家讲解.首先是掌握最简单的存储过程,无返回值的存储过程. 案例:现有一张表book, ...
 - 《JavaScript高级程序设计》读书笔记 ---RegExp 类型
			
ECMAScript 通过RegExp 类型来支持正则表达式.使用下面类似Perl 的语法,就可以创建一个正则表达式.var expression = / pattern / flags ; 其中的模 ...
 - Ubuntu下Android apk反编译
			
需要用到的工具 1.apktool_2.0.3.jar https://bbuseruploads.s3.amazonaws.com/0becf6a1-1706-4f2e-9ae6-891e00a8d ...