Q&A
3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7
前提・実現したいこと
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
回答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
総合スコア36930
さっそく回答して頂きありがとうございます。
無事高さを揃えることが出来ました。
あなたの回答
tips
プレビュー
