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

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

新規登録して質問してみよう
ただいま回答率
85.35%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1379閲覧

ヘッダーリストとヘッダーロゴの高さが合わない

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/04 13:49

前提・実現したいこと

write書くためのテーマというWEBサイトの模写コーティングをやっているのですが、ヘッダーロゴの下に空白があり、高さが揃わないです。原因を教えて頂きたいです。

発生している問題・エラーメッセージ

ヘッダーロゴの下に空白があり、ヘッダーリストと高さが揃わない

該当のソースコード

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Write</title> <link rel="stylesheet" href="css/style.css"> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> </head> <body> <div class="container"> <header> <nav class="header-navi"> <div class="title"> <h1><a href="#">Write</a></h1> <p>書くためのテーマ</p> </div> <div class="header-list"> <ul> <li><a href="#">ホーム<i class="fas fa-chevron-down"></i></a></li> <li><a href="#">ページ</a><i class="fas fa-chevron-down"></i></li> <li><a href="#">タイポグラフィー</a></li> <li><a href="#">お問い合わせ</a></li> <img src="img/search-icon.png" class="search" alt="検索"> </ul> </div> </nav> </header> <main> <img src="image/cropped-nicole-honeywill-730102-unsplash.jpg"> </main> </div> </body> </html>

CSS
@charset "utf-8";

html {
font-size: 18px;
}

  • {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;

}
body {
margin: 60px 40px;
}
.container {
margin: 0 auto;
width: 1035px;
font-family: 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
}
a {
text-decoration: none;
color: #666;
}

header {
height: 145px;
}
.title {
display: block;
}
.header-list {
float: right;
}
.header-list li {
list-style: none;
display: flex;
float: left;
}

試したこと

align-content

補足情報(FW/ツールのバージョンなど)

Visual studio code

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

css

1.header-navi { 2 display: flex; 3 align-items: flex-end; 4 justify-content: space-between; 5}

投稿2021/01/05 01:49

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/01/05 06:32

さっそく回答して頂きありがとうございます。 無事高さを揃えることが出来ました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問