CSS overflow: hiddenを使ってメニューバーのレイアウト崩れないようにする方法

2023年3月15日

環境
Google Chrome　111.0.5563.65（Official Build）
Windows 10 Home 64bit

書式
親要素
overflow: hidden;
子要素
float: left;
親子要素：親にoverflow:hiddenで子のfloatを解除します。
親と子の関係がある場合で、floatした子要素は、親要素から高さを認識できなくなります。
親要素にoverflow:hiddenを使用すると親要素から子要素の高さを認識できるようになります。

使用例

<!DOCTYPE html>
<html>
<head>
<style>

#nav {
  list-style: none;
   overflow: hidden;
}

#nav li {

    width: 110px;

    text-align: center;

    background-color: skyblue;

    float: left;

    height: 35px;

    line-height: 35px;

     margin-right: 2px;
}

#nav li a {

    text-decoration: none;

    color: red;

    font-weight: bold;

    padding: 20px;
}
</style>
</head>
<body>

<ul id="nav">

  <li><a href="#">東京</a></li>

   <li><a href="#">大阪</a></li>

   <li><a href="#">福岡</a></li>

   <li><a href="#">横浜</a></li>

</ul>

</body>
</html>

結果
ブラウザの画面サイズによっては回り込みが発生してメニューバーが2段に表示されます。
レイアウトが崩れなくなります。

CSS

Posted by arkgame

関連記事: