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

1.给ul元素设置高度height
最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下:

ul {
    list-style-type: none;
    height: 30px; /*添加高度属性*/
}

次方法有个缺点:就是元素的高度不能自适应内容。

2.添加一个空的div
添加一个空的div,这个div和浮动元素同一级别,且位于浮动元素的最后。这个方法必须要为这个div添加一个clear:both属性,代码如下:


  • 标签1

  • 标签2

  • 标签3


3.添加zoom属性,适用于IE

IE支持一个CSS属性zoom,当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。设置为zoom:1,代码如下:

ul {
    list-style:none;
    zoom:1; /* 适用于IE */
}



                    
                        
                                
                                

  •                                 
                                    style="background-color:red"
                                     >
                                    

    ${item.device.directionId } 区  ${item.location.locationName }


                                    

    ${item.device.deviceName }


                                    

    ${item.deviceIp }


                                    
                                      正常
                                    网络异常
                                    

                                    
                                

  •                     

                    

                    

                    


你可能感兴趣的:(html,html)