I am making a css menu. For this I am using a ul. When I make li float left then all li‘s 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.
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.
How can I solve this?
Just add
overflow: auto;to the<ul>. That will make it so that the text doesn’t leak outside of the UL.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!See: http://jsfiddle.net/k7Wqx/