网址: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自适应高度的几种方法的更多相关文章

  1. 两段超简单jquery代码解决iframe自适应高度问题(不用判断浏览器高度)

    这里介绍两个超级简单的方法,不用写什么判断浏览器高度.宽度啥的.下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的.注意别放错了地方.iframe的代码 ...

  2. after及before伪元素及解决父元素塌陷的几种方法

    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...

  3. IOS7.0 UILabel实现自适应高度的新方法

    //IOS7.0中利用- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attri ...

  4. iOS:解决UITextView自适应高度粘贴大量文字导致显示不全的问题

    一.描述 在UITextView输入框中粘贴大量的文字时,UITextView内容自适应高度计算出现误差,导致整块文字上移消失. 二.方案 在UITextView文字改变的监听中添加如下方法即可. [ ...

  5. 【Cocos2d-x游戏开发】解决Cocos2d-x中文乱码的三种方法

    众所周知,Cocos2d-x是一款不错的开源引擎,但是在Cocos2d-x中直接使用中文是无法正确显示的.比如下面的情况: 解决这个问题常用的有三种方法:1.通过转换为UTF-8编码来显示.2.使用i ...

  6. [moka同学笔记]yii2.0小物件的简单使用(第一种方法)

    这是第一种方法,还有另一种方法,其实都差不多. 1.在创建widgets\HelloWiget.php <?php /** * Created by PhpStorm. * User: Admi ...

  7. Android内存管理(5)*官方教程:Logcat内存日志各字段含义,查看当前内存快照,跟踪记录内存分配,用adb查看内存情况时各行列的含义,捕获内存快照的3种方法,如何让程序暴漏内存泄漏的方法

    Investigating Your RAM Usage In this document Interpreting Log Messages                 内存分析日志中各消息的含 ...

  8. 解决android 大图OOM的两种方法

    最近做程序中,需要用到一张大图.这张图片是2880*2180大小的,在我开发所用的华为3C手机上显示没有问题,但是给米3装的时候,一打开马上报OOM错误.给nexus5装,则是图片无法出来,DDMS中 ...

  9. Maven 知识点总结以及解决jar报冲突的几种方法

    1.常见的命令 Compile Test Package Install Deploy Clean 2.坐标的书写规范 groupId 公司或组织域名的倒序 artifactId 项目名或模块名 ve ...

  10. VC6.0加载lib文件的三种方法

    MFC编写程序,都要用到动态链接库,MFC相关的动态库有MFCD42和MFC42等,MFC框架程序已经自动加载,那么如何引入第三方的动态链接库到工程中呢? 静态链接库是要先把程序中所需要使用的函数编译 ...

随机推荐

  1. Gentoo双网卡同时启用上内外网

    引言:本文配置网络通过 OpenRC/netifrc 方法(net.*scritps)配置. 外网网卡:enp3s4 内网网卡:enp2s0 外网地址(通过路由器) IP: 192.168.1.10 ...

  2. Buffett saying

    1. 人生财富就像滚雪球,最重要的是发现很湿的雪和很长的坡. 2. 雪球想滚大,必须要有最坚实的核心:一生坚持的价值投资理念 价值投资一直是巴菲特投资理念的核心,他始终认为投资企业最重要的是要看准企业 ...

  3. ECOS-Mongodb安装

    安装Mongodb服务 安装Mongodb服务 author :James,jimingsong@vip.qq.com since :2015-03-03 下载Mongodb安装包(64位哦) 安装M ...

  4. Knockout js 绑定 radio 时,当绑定整形的时候,绑定不生效

    解决方案: 使用checkedValue和checked 组合,如下代码. <div><input type="radio" name="flavorG ...

  5. ES6 之 Set数据结构和Map数据结构 Iterator和for...of循环

    ECMAScript 6 入门 Set数据结构 基本用法 ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. va ...

  6. NIC Bonding: 2 nic port as 1 interface

    The following is concluded from here. Consider we have 2 interfaces: eth0 & eth1 bond the two in ...

  7. jquery实现图片漂浮效果

    $(window).load(function(){   function moveRocket(){   $("#float").animate({'left':'+=100'} ...

  8. 关于STM32的IO口速率问题

    输入模式可以不用配置速度,但是输出模式必须确定最大输出频率.当STM32的GPIO端口设置为输出模式时,有三种速度可以选择:2MHz.10MHz和50MHz,这个速度是指I/O口驱动电路的速度,是用来 ...

  9. 阻塞与非阻塞、同步与异步 I/O模型

    I/O模型 Linux 下的五种I/O模型 阻塞I/O(blocking I/O) 非阻塞I/O (nonblocking I/O) I/O复用(select 和poll) (I/O multiple ...

  10. 使用javassist运行时动态重新加载java类及其他替换选择

    在不少的情况下,我们需要对生产中的系统进行问题排查,但是又不能重启应用,java应用不同于数据库的存储过程,至少到目前为止,还不能原生的支持随时进行编译替换,从这种角度来说,数据库比java的动态性要 ...