帶圓角的菜單

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; 兩次>。

您忘記添加右下半徑，因此可能會影響您的代碼。

謝謝