css - 带圆 Angular 的菜单

Question

我正在尝试创建一个带有圆 Angular 的菜单栏，但是当我将 float:left 添加到 li 元素时，圆 Angular 消失了...

这是我的代码:

<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

将 overflow:hidden 添加到 ul 的 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;
}

目前，当你添加一个 float:left; 时，ul 变成了 0px 高度。这就是为什么它看起来圆 Angular 消失了。

overflow:hidden 是此类问题的修复方法之一。在此处查看演示:http://jsfiddle.net/2x3Vm/