博客列表 >li浮动时ul高度为0,解决ul自适应高度的几种方法

li浮动时ul高度为0,解决ul自适应高度的几种方法

何澤小生的博客
何澤小生的博客原创
2018年08月22日 17:45:31757浏览

内容提要:
  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 */
}

通过这几种方法基本可以解决元素的高度不能自适应内容。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议