li浮动时ul高度为0,解决ul自适应高度的几种方法
参考文案:http://www.cnblogs.com/karila/p/6065727.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 */ }

浙公网安备 33010602011771号