2

我正在尝试创建一个带有圆角的菜单栏，但是当我将其添加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
}
4

8 回答 8

6

添加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/

于 2013-01-16T10:45:19.240 回答
1

最快的方法就是将你的 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 中的列表元素会丢失宽度的上下文。另一种方法是清除您的列表

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>
于 2013-01-16T10:45:52.700 回答
1

如果您只想显示您的 LI 并排显示，请显示：inline-block；实际上可能比浮动元素更好。

于 2013-01-16T10:46:55.723 回答
0

这个问题的解决方案是常见的clearfix。

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

于 2013-01-16T10:44:50.713 回答
0

那是因为你对 . 将此添加到您的 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>
于 2013-01-16T10:45:12.100 回答
0

你必须使用清晰的 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;
}

父母忽略了风格浮动的孩子的身高。

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

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

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

于 2013-01-16T10:47:53.180 回答
0

正如其他人所说，浮子使 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;
}
于 2013-01-16T10:48:19.433 回答
0

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

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

谢谢

于 2018-01-21T10:02:21.623 回答