为什么对于样式为float的li：左侧浏览器会将ul元素的高度评估为0？ [英] Why for li with style float:left browser evaluates the height of the ul element to 0?

问题描述

在要点上提供的代码中： https://gist.github.com/1341600
我尝试使用ul / li元素将一些搜索表单元素（而不是表格）分组在一起。
当在浏览器中检查输出时（Chrome 15 / FF 7 with firebug），ul元素似乎具有高度0，并且li元素显示在其外部。当我从 ul.search->注释掉



float：left; 输入li CSS声明，然后ul元素的高度显示正确。

有人可以指出我的解决方案，以便正确看到ul元素的高度？

解决方案

这不是一个bug，它是一个功能！

浮动元素的容器会缩小，以便其他内联元素可以在其周围流动（按照规范）。

在这种情况下的3个选项是：

1. 使用已知的身高值并将其应用于<$ c $

     ul {height：150px; } 
     




2. 使用 overflow 属性在 ul 元素上强制浏览器重新计算其高度及其内部的所有元素。

     ul {overflow：hidden; } / *隐藏是首选，因为它从不添加滚动条* / 
     




3. 浮动容器本身。因为如果它本身漂浮，就不需要缩小它。

     ul {float：left; } 
     

In the code presented on the gist : https://gist.github.com/1341600 I am trying to use ul/li elements for grouping together some search form elements (instead of table). When inspecting the output in the browser (Chrome 15/FF 7 with firebug) the ul element seems to have height 0 and the li elements are displayed outside of it. When I am commenting out the

float: left; statement from ul.search-inputs li CSS declaration then the height of the ul element is displayed correctly.

Could anybody point me to a solution in order to see correctly the height of the ul element?

解决方案

That's not a bug, it's a feature!

The container of a floated element is shrunken so that other inline elements will flow around it (as per specs).

The 3 options in this case are to:

1. Use a known height value and apply it to the ul element.

   ul { height: 150px; }
   

2. Use the overflow property on the ul element to force the browser to recalculate its height along with all the elements inside of it.

   ul { overflow: hidden; } /* hidden is preferred as it never adds scrollbars */
   

3. Float the container itself. As there is no need to shrink it if it floats by itself.

   ul { float: left; }
   

这篇关于为什么对于样式为float的li：左侧浏览器会将ul元素的高度评估为0？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！