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 uloses宽度上下文中。另一种方法是清除你的清单

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

如果您只想将LIps显示在彼此旁边，请显示：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; 
}

然后将课程.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;
}

父母忽略了漂浮在风格中的孩子的身高。

有关float的详细信息，请参阅this link。

有关清除的更多信息，请参阅this link。

您可以看到一个示例here。

Answer 7

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

而不是clearfix，我为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

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

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

由于

带圆角的菜单

8 个答案: