带圆角的菜单

Question

i'm trying to create a menubar with rounded corners, but when i add the float:left to the li elements, the rounded corners dissapear...

This is my code:

<ul>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
</ul>

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

li {
  padding: 5px;
  #float: left; #toggle this
}

Answer 1

add overflow:hidden to ul 's css:

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow:hidden;
}

Currently, when you add a float:left; ul became 0px height. That why it looks like rounded corners disappear.

overflow:hidden is one of the fixes for such issues. See demo here: http://jsfiddle.net/2x3Vm/

Answer 2

Quickest way is simply to just set your ul to float left

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  float:left;
}

Your problem is when you float you list elements inside your ul loses context of width. Another way would be to clear your list

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;

}

li {
  padding: 5px;
  float: left; 
}
.clear{clear:both;}

<ul>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
  <li class="clear"></li>
</ul>

Answer 3

If all you want to do is show your LI's next to eachother, display: inline-block; might actually work better than floating the elements.

Answer 4

The solution for this problem is the common clearfix .

Here's a fiddle that fixes it: http://jsfiddle.net/5mxJA/ . Just add the clearfix class to your ul .

Answer 5

That's because you have no clear to the . Add this to your CSS:

.clearfix { *zoom: 1; }
.clearfix:after { 
width: 100%; 
content: ''; 
font-size: 0; 
line-height: 0; 
text-indent: -4000px; 
clear: both; 
display:block; 
}

and then add class .clearfix to your <ul> :

<ul class="clearfix">
  <li>jkfasdf</li>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
</ul>

Answer 6

you must use clear div.

<ul>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
  <li class="clear"></li>
</ul>

and

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

li {
  margin: 5px;
  padding: 5px;
  float: left;
  background: blue;
}
li.clear{
  width: 0;
  height: 0;
  float: none;
  clear: both;
  margin: 0;
  padding: 0;
}

parents ignore height of children that has float in style.

for more information about float see this link .

for more information about clear see this link .

you can see one sample here .

Answer 7

As the others have said, the float voids the UL's height.

Rather than a clearfix, I'd set a default height for the UL:

ul{
  list-style: none;
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  height: 30px;
}

li {
  padding: 5px;
  float: left;
}

Answer 8

I used the code in one of my sample projects, and it gave me a warning of using < border-bottom-left-radius: 5px; twice >.

You forgot to add in bottom-right-radius, so that may have impacted your code.

Thanks