免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 起源之家 > 网络学院 > 建站资讯 > 文章正文

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

时间:10-12 01:38 来源:广信之家 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  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 */
}

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

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,li浮动时ul高度为0,解决ul自适应高度的几种方法对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与li浮动时ul高度为0,解决ul自适应高度的几种方法无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对起源之家有任何意见或建议,请到交流平台反馈。到留言板反馈