2016-07-05 49 views
0

enter image description hereこんにちは私は水平ナビゲーションバーを作ろうとしています。 enter image description here ulの場合は、オーバーフロー:hiddenを入れました。 私はフロートを左に置いた。 そして、水平ナビゲーションバーの下にいくつかの段落があります。オーバーフローしますか:非表示にしてブロックレベル要素にしますか?

「オーバーフロー:非表示」を削除すると、段落は水平ナビゲーションバーのすぐ横に移動します。 私はなぜそれが理解できません。 誰かが私にそれを説明してくださいできますか?

+0

、あなたのHTML、CSSを共有してくださいすることができますか? –

答えて

0

overflow: hidden;は、liタグのフロートをクリアするために使用されます。それがなければ、段落はリストの隣に浮かびます。

+0

ありがとうございます。だから、私が水平ナビゲーションバーを作っているときは、常にオーバーフローを使用する必要があります:隠され、浮動小数点:左? –

+0

フロートをクリアするには複数の方法があります。一般的に最もよく使われる方法は、擬似要素(:before、:after)を使ってクリアするmicro clearfixと呼ばれます。 http://nicolasgallagher.com/micro-clearfix-hack/ –

+1

ありがとうございました –

1

いいえ。 neveroverflow:hiddennavigation
overflow:hiddenに表示する必要がある要素を非表示にすることができます。 本当にが必要な場合以外は使用しないでください。

が、この場合には、あなたは

は、ここでは表示されません。

li { 
    float:left; 
    padding:10px 
} 
ul { 
float:left; 
list-style:none; 
background:grey; 
width:auto; 
} 
p { 
clear:left; 
float:left; 
width:100px 
} 

OR ul(ナビゲーションリストにfloat:left;width:100%を使用します。段落 コード上jsfiddle

使用clear:leftを)

はここを参照してくださいjsfiddle

コード:

li { 
    float:left; 
    padding:10px 
} 
ul { 
float:left; 
list-style:none; 
background:grey; 
width:100%; 
} 
p { 

float:left; 
width:100px 
} 
+0

左にあるすべてのフローティングは、さらにページの下にあるものを助けるつもりはありません。浮動小数点をクリアするのに最適です。そして、すべてを100%にする必要はありません。 –

+0

私は 'p'を浮動させました。 'ul'に' float:left'と 'width:100%'を使っても問題はなく、他の要素を 'float'や' 100% 'する必要はありません –

関連する問題