软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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自适应高度的几种方法无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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