More than 3 years have passed since last update.

ヘッダーメニューの横並びが上手くいかなかった時の対処方法

Last updated at 2020-09-30Posted at 2020-09-30

ヘッダーメニューの横並びができなかった時の対処方法を解説していきます

１回頭に入れたけど忘れちゃったって人のために要点だけをまとめました

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サイト名</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    /*ここからがヘッダーメニューのコードはここから*/
    <header>
      <div class="container">
        <div class="header-logo">ロゴ名</div>
        <div class="header-list">
          <ul>
            <li>リスト名</li>
            <li>リスト名</li>
            <li>リスト名</li>
          </ul>
        </div>
      </div>
    </header>
　　/*ここまでがヘッダーメニューのコード*/
  </body>
</html>

では次にcssを説明していきます

css

li {
  list-style: none;
  float: left;　←ここに「float: left;」を入れる
  padding: 33px 20px;
}

header {
  height: 90px;　←ヘッダー自体に高さを指定する
  background-color: #26d0c9;
  color: #fff;
}

.header-logo {
  float: left;　←ここに「float: left;」を入れる
  font-size: 36px;
  padding: 20px 40px;
}

ヘッダーメニューを横並びにしたい時は「float: left;」を「li」と「.header-logo」に入れる

また、floatを指定すると親要素の高さが0になるので、ヘッダー自体にheightを指定します

これで完璧。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up