li浮动时ul高度为0,解决ul自适应高度的几种方法
时间:2022-04-23
本文章向大家介绍li浮动时ul高度为0,解决ul自适应高度的几种方法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
内容提要: li浮动时ul高度为0,解决ul自适应高度的几种方法 在网页设计中,常常需要对li标签做浮动效果,但是在不同浏览器中会遇到兼容性问题,比如IE中会出现ul高度为0的情况,是效果不能达到预期效果。那么这里我就来讲解一下解决这个问题的几种方法。
在网页设计中,常常需要对li标签做浮动效果,但是在不同浏览器中会遇到兼容性问题,比如IE中会出现ul高度为0的情况,是效果不能达
到预期效果。那么这里我就来讲解一下解决这个问题的几种方法。
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 */
}
通过这几种方法基本可以解决元素的高度不能自适应内容。
- 如何利用配置中心规范构建PaaS服务配置
- Selenium2+python自动化8-SeleniumBuilder辅助定位元素
- HDU 1250 Hat's Fibonacci
- Scrapy在Ubuntu下的安装与配置
- Selenium2+python自动化20-引入unittest框架
- HDU 1002 A + B Problem II(高精度加法(C++/Java))
- POJ 1018 Communication System
- POJ 1017 Packets
- Codeforces 725B Food on the Plane
- Codefoces 723B Text Document Analysis
- Codefoces 723A The New Year: Meeting Friends
- ECJTUACM16 Winter vacation training #1 题解&源码
- 信息学奥赛一本通算法(C++版)基础算法:高精度计算
- 看破欧拉函数的奥秘
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法