防止在CSS中嵌套嵌套的浮动项

时间:2022-12-24 22:23:01

I have a div that contains many floated child items. Each child item is a div containing an input and a label. In Firefox it looks fine, but in IE7, the last item on a line is wrapped to fit, rather than being moved to the next line.

我有一个包含许多浮动子项的div。每个子项都是包含输入和标签的div。在Firefox中它看起来很好,但在IE7中,一行中的最后一项被包装以适合,而不是被移动到下一行。

Wrapped Items http://harriyott.com/images/wrapping.png

包裹物品http://harriyott.com/images/wrapping.png

How do I fix this?

我该如何解决?

4 个解决方案

#1


Have you tried applying the white-space: nowrap; property to the labels?

你试过应用白色空间:nowrap;财产到标签?

http://www.w3schools.com/cssref/pr_text_white-space.asp

#2


Minimize the browser window (e.g. Ctrl + - in google chrome) to the minimum and set the "min-width: minValue in px" for the main "container" . .

最小化浏览器窗口(例如,在Google Chrome中的Ctrl + - ),并为主“容器”设置“min-width:minValue in px”。 。

#3


Try explicitly setting the width of each nested div.

尝试显式设置每个嵌套div的宽度。

#4


I dont know if I understand correctly, but have you try the old trick:

我不知道我是否理解正确,但你有没有尝试过这个老把戏:

<div style="clear:both;"></div>

#1


Have you tried applying the white-space: nowrap; property to the labels?

你试过应用白色空间:nowrap;财产到标签?

http://www.w3schools.com/cssref/pr_text_white-space.asp

#2


Minimize the browser window (e.g. Ctrl + - in google chrome) to the minimum and set the "min-width: minValue in px" for the main "container" . .

最小化浏览器窗口(例如,在Google Chrome中的Ctrl + - ),并为主“容器”设置“min-width:minValue in px”。 。

#3


Try explicitly setting the width of each nested div.

尝试显式设置每个嵌套div的宽度。

#4


I dont know if I understand correctly, but have you try the old trick:

我不知道我是否理解正确,但你有没有尝试过这个老把戏:

<div style="clear:both;"></div>