带圆角的菜单

Question

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

这是我的代码：

<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高度。 这就是圆角看起来消失的原因。

overflow:hidden是针对此类问题的解决方案之一。 在此处查看演示： http : //jsfiddle.net/2x3Vm/

Answer 2

最快的方法就是将ul设置为向左浮动

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;
}

您的问题是，当您浮动时，您在ul中列出的元素会丢失width的上下文。 另一种方法是清除您的列表

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

如果您要做的就是将您的LI彼此相邻显示，则显示：inline-block; 实际上可能比浮动元素更好。

Answer 4

解决此问题的方法是使用通用的clearfix 。

这是修复它的小提琴： http : //jsfiddle.net/5mxJA/ 。 只需将clearfix类添加到您的ul 。

Answer 5

那是因为你不清楚。 将其添加到您的CSS：

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

然后将class .clearfix添加到您的<ul> ：

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

Answer 6

你必须使用明确的div。

<ul>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
  <li class="clear"></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 {
  margin: 5px;
  padding: 5px;
  float: left;
  background: blue;
}
li.clear{
  width: 0;
  height: 0;
  float: none;
  clear: both;
  margin: 0;
  padding: 0;
}

父母不理会飘浮的孩子的身高。

有关浮动的更多信息，请参阅此链接 。

有关清除的更多信息，请参阅此链接 。

你可以在这里看到一个样本。

Answer 7

正如其他人所说，浮子会使UL的高度无效。

我没有为clearfix设置默认高度：

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

我在我的一个示例项目中使用了代码，它给了我一个使用<border-bottom-left-radius：5px; 两次>。

您忘记添加右下半径，因此可能会影响您的代码。

谢谢