次の例で `overflow：hidden`とは何ですか？

このコードからoverflow:hiddenを削除すると、ナビゲーションバー全体が隠れてしまうので、 `overflow：hidden;この例では動作します。あなたのケースでは次の例で `overflow：hidden`とは何ですか？

ul{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: rgb(100, 100, 100); 
 
} 
 

 
li{ 
 
    float: left; 
 
} 
 

 
li a{ 
 
    padding: 10px 30px; 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    font-family: sans-serif; 
 
} 
 

 
li a:hover{ 
 
    background-color: rgb(50, 50, 50); 
 
}

<ul> 
 
    <li><a href="#" class="active">Home</a></li> 
 
    <li><a href="#">Gallery</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">News</a></li> 
 
    <li><a href="#">Store</a></li> 
 
    <li><a href="#">Form</a></li> 
 
</ul>

出典

2016-06-22 Muhammad Naseer Saidee

を非表示になりますスペースの不足の場合には、コンテンツのスクロールを行います以下のサンプル、のようなフォーマットに学ぶしてください、ということでしょうコード。 – Li357

あなたのケースでは、 'overflow：hidden'は' float'を持つ子の親に子のサイズに拡大するように指示します。 – LGSon

ありがとうございました** @ LGSon **私の質問に答えるために、私はあなたが説明したことを完全に理解しています。もう一度ありがとうございます！ –

、overflow: hiddenは、その子のサイズに拡大してfloatを持つ子供の親に伝えます。

またoverflow: autoはhiddenが同じ

ul{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: auto; 
 
    background-color: rgb(100, 100, 100); 
 
} 
 

 
li{ 
 
    float: left; 
 
} 
 

 
li a{ 
 
    padding: 10px 30px; 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    font-family: sans-serif; 
 
} 
 

 
li a:hover{ 
 
    background-color: rgb(50, 50, 50); 
 
}

<ul> 
 
    <li><a href="#" class="active">Home</a></li> 
 
    <li><a href="#">Gallery</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">News</a></li> 
 
    <li><a href="#">Store</a></li> 
 
    <li><a href="#">Form</a></li> 
 
</ul>

出典

2016-06-22 05:14:44 LGSon

次の例で `overflow：hidden`とは何ですか？

答えて

関連する問題