ヘッダーのレイアウト崩れを起こらないようにしたい

タイトルの通りです logo-hにheader-listが下に押されてheaderからはみ出るという状況になっています
この後、logo-hにposition:absolute;を指定して浮かせ、header-listを元に戻してこれを直すことができました
そもそもこのようなことが起こらないようなコードの書き方などはないのでしょうか
どう検索すればいいのかわからず困っています　よろしくお願いします

HTML
1<!DOCTYPE html>
2<html lang="ja" >
3  <head>
4    <meta charset="utf-8">
5    <title>progate上級　模写</title>
6    <link rel="stylesheet" href="progate-css/reset.css">
7    <link rel="stylesheet" href="progate-css/progate.css">
8  </head>
9  <body>
10    <header class="header">
11      <p class="logo-h">>Progate</p>
12      <ul class="header-list">
13        <li><a href="#">レッスン</a></li><li
14        ><a href="#">新規登録</a></li><li
15        ><a href="#">ログイン</a></li>
16      </ul>
17
18    </header>
19    
20
21  </body>
22</html>
23

CSS
1.header{background-color:rgba(40,50,56,0.9); height:65px;  width:100%;
2position:fixed; top:0px; z-index:5; }
3.header-list{ list-style: none; text-align:right; margin-right:40px;}
4.header-list li{display: inline-block;}
5.header-list a{text-decoration:none; color:white;
6    line-height:65px; transition: 0.5s; padding:0px 20px;
7    display:block;
8}
9.logo-h{font-size:1.5rem; font-weight:bold; display: inline-block;
10  position:absolute; line-height: 65px;}
11.header-list a:hover{background-color: rgba(255,255,255,0.6)}
12

行動規範の内容に同意します

回答1件

ベストアンサー

header-list は ulなので、ブロックレベル要素になります。ブロックレベル要素は画面幅一杯に広がりますので、前の要素の下に配置されます。

logo-h は display: inline-block;を指定してますので、header-list にも、display: inline-block; を設定すれば横並びになります。

ただ、現在なら横並びは Flexbox でするのがいいでしょう。
水平/垂直のレイアウトを簡単に設定できます。

css
1.header{
2  background-color: rgba(40,50,56,0.9);
3  height:65px; width:100%;
4  position:fixed;
5  top:0px;
6  z-index:5;
7  display: flex; /* 横並び */
8  justify-content: space-between; /* 両端揃え */
9  align-items: center; /* 上下位置中央揃え */
10}
11.header-list{
12  list-style: none;
13  margin-right:40px;
14}
15.header-list li{
16  display: inline-block;
17}
18.header-list a{
19  text-decoration:none;
20  color:white;
21  line-height:65px;
22  transition: 0.5s;
23  padding:0px 20px;
24  display:block;
25}
26.logo-h{
27  font-size:1.5rem;
28  font-weight:bold;
29}
30.header-list a:hover{
31  background-color: rgba(255,255,255,0.6)
32}

投稿2021/01/25 14:46

hatena19

総合スコア33782

syo--

2021/01/28 04:41

ありがとうございます！修正できました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ヘッダーのレイアウト崩れを起こらないようにしたい

関連した質問