Q&A
前提・実現したいこと
ヘッダーのメニューを横並びにし、高さを揃えたい。
HTML、CSSで模写を行っています。
wordpressの「white」のテーマを模写しているのですが、
ヘッダーを横並びにするところまでは display:flex;でできたのですが、
pタグとulタグの高さが揃わず、で困っています。
両方ブロック要素というとこまでは理解できたのですが、なぜ高さが揃わないのでしょうか。
高さを揃える方法を教えていただきたいです。
エラーメッセージ
該当のソースコード
ソースコード<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="stylesheet.css"> <title>White 書くためのテーマ</title> <script src="https://kit.fontawesome.com/cc92221ca2.js" crossorigin="anonymous"></script> <style> body{ width: 980px; margin:0 auto; } .container{ width:980px; margin:0 auto; display: flex; justify-content: space-between; } .header-center{ display: flex; background-color: red; } li{ list-style: none; margin-left: 10px; } </style> </head> <body> <header> <h1>White</h1> <div class="container"> <div class="header-left"> 書くためのテーマ </div> <div> <ul class="header-center"> <li><a href="">ホーム <span><i class="fas fa-angle-down"></i></span></a></li> <li><a href="">ページ <span><i class="fas fa-angle-down"></i></span></a></li> <li><a href="">タイポグラフィー</a></li> <li><a href="">お問い合わせ</a></li> </ul> </div> <div class="header-right"> 検索 </div> </div> </header> </body> </html>
試したこと
line-heightでの調整
ul要素とp要素で高さを揃えることでgoogle検索など
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
まず全角スペースが紛れ込んでいるので、ソースコード内で文字列検索して削除してください。
↓以下を参照してください。
そのうえで、ulの上下にあるulのmarginがあるので、margin: 0;を指定してください。
CSS
1/* 追加 */ 2.header-center { 3 margin: 0; 4}
投稿2020/05/11 09:03
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/11 09:36