如何强制div元素将其内容保存在容器中

I making css menu. for this I am using ul. When I make li float left then all lis gets outside of the ul. I mean the height of ul become zero. How can I make li display inside ul after giving float left.

我做css菜单。为此,我使用ul。当我让李浮动时,所有的lis都超出了ul。我的意思是ul的高度变为零。如何在向左浮动之后使li显示在ul内。

One way to do is to make a div tag with some common class and add clear: both to it in css but I do not want this. I need better solution. Help please

一种方法是使用一些公共类创建一个div标签并添加清楚:在css中都是它,但我不想要这个。我需要更好的解决方案请帮助

4 个解决方案

#1

Just add overflow: auto; to the <ul>. That will make it so that the text doesn't leak outside of the UL.

只需添加overflow:auto;到

See: http://jsfiddle.net/6cKAG/

However, depending on what you're doing, it might be easier to just make the <li> display: inline;. It totally depends on what you're doing!

但是,根据您正在做的事情,可能更容易进行

显示:inline;。这完全取决于你在做什么!

See: http://jsfiddle.net/k7Wqx/

#2

If you define float to your child then you have to clear your parent. Write overflow:hidden to your UL.

如果您为孩子定义浮动,那么您必须清除您的父母。写溢出:隐藏到您的UL。

ul{
 overflow:hidden;
}

OR You can also use clearfix method for this:

或者你也可以使用clearfix方法:

ul:after{
 content:'';
 clear:both;
 display:block;
}

Read this http://css-tricks.com/snippets/css/clear-fix/

阅读http://css-tricks.com/snippets/css/clear-fix/

#3

If you want the overflowing text in the div to automatically newline instead of being hidden or making a scrollbar, use the

如果您希望div中的溢出文本自动换行而不是隐藏或制作滚动条,请使用

word-wrap: break-word

property.

#4

This happens when floated elements (menu items) are positioned inside a non-floating container (ul).

当浮动元素(菜单项)位于非浮动容器(ul)内时,会发生这种情况。

This could either be fixed by floating the container as well (rarely acceptable), or applying a clearfix which addresses exactly this issue.

这可以通过浮动容器来修复(很少可接受),或者应用一个明确解决此问题的clearfix。

#1