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

の cssoverflow:hiddenに追加:ul

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このような問題の修正の 1 つです。ここでデモを参照してください: http://jsfiddle.net/2x3Vm/

于 2013-01-16T10:45:19.240 に答える
1

LI を並べて表示するだけの場合は、次のように表示します。実際には、要素をフローティングするよりもうまく機能する可能性があります。

于 2013-01-16T10:46:55.723 に答える
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 に答える
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;
}

親は、フロート スタイルを持つ子の高さを無視します。

float の詳細については、このリンクを参照してください。

クリアの詳細については、このリンクを参照してください。

ここでサンプルを 1 つ見ることができます。

于 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

この問題の解決策は、共通の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 に答える