我有http://jsfiddle.net/Lijo/SCYVN/4/中显示的HTML。
有“optionLine”类,带蓝色边框。但是当没有设置溢出时,边框不能按预期工作。设置溢出时,它工作正常。
为什么在这种情况下强制溢出?
任何使其无溢出工作的方法吗?
CODE
.optionLine
{
display:block;
border: 1px solid blue;
/*overflow:auto;*/
}
参考:
答案 0 :(得分:4)
边框无法正常工作,因为带边框的元素的子元素已浮动。
需要清除浮动元素,使其容器具有正确的预期尺寸。
有关明确修复信息,请参阅here
此SO question还针对不同情况提供了一些非常详细的解释和解决方案。最近我经常使用display:table
方法......
答案 1 :(得分:2)
试试这个http://jsfiddle.net/SCYVN/6/
.optionLine
{
display: table;
border: 1px solid blue;
/*overflow:auto;*/
width:100%;
}
答案 2 :(得分:1)
因为您的物品(在容器内)是浮动的。浮动物品在文件的正常流动之外;你需要清除它们的浮动(通过在容器上使用overflow:auto,或者添加另一个具有clear:left或clear:两者都指定的元素)来捕获文档的流回。
答案 3 :(得分:1)
将float:left;
放在.optionItem
上,它将被修复。如果您不想这样做,则必须在(对于每行浮动项目)和浮动项目clear: both;
...之间添加一个包装器...
但添加overflow: auto;
始终是最佳方式。
答案 4 :(得分:-1)
您需要为轮廓div设置宽度和高度
例如:
border: blue 1px solid;
width:500px;
height:50px;