mik********

2022/5/21 14:56

22回答

リストを使って画像のようなヘッダーを作りたいのですが、うまくできません。 どうしたら良いでしょうか？ コードは大まかですが下のような感じです。 宜しくお願いします。

リストを使って画像のようなヘッダーを作りたいのですが、うまくできません。 どうしたら良いでしょうか？ コードは大まかですが下のような感じです。 宜しくお願いします。 -----html------ <header id="header"> <nav class="menu-left"> <ul> <li> <a href="">top</a></li> <li> <a href="#">menu1</a></li> <li> <a href="#">menu2</a></li> </ul> </nav> <div class="menu-right"> <ul> <li> <a href="#">お問い合わせ</a></li> <li> <a href="#">ログイン</a></li> </ul> </div> </header> -----css------ #header{ height: 100px; width: 1000px; margin: 0 auto; } .menu-left ul{ display: flex; justify-content: flex; left: 50%; } .menu-left li{ list-style:none ; margin-right: 30px; } .menu-right ul{ display: flex; justify-content: flex-end; } .menu-right li{ list-style: none; margin-right: 30px; }

画像

HTML、CSS・32閲覧

ベストアンサー

2
5htr

2022/5/21 15:24

『#header{〜}』間に『display:flex;justify-content: space-between;』追加で多分解決するんじゃないでしょうか。 自分ならHTML構成も変えて下記にします。 ▼例 ▽HTML <header id="header"> <nav> <ul> <li><a href="">top</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> </ul> <ul> <li> <a href="#">お問い合わせ</a></li> <li> <a href="#">ログイン</a></li> </ul> </nav> </header> ▽CSS #header { display: flex; flex-direction: column; min-height: 100px; width: 1000px; margin: 0 auto; border: solid 1px #ccc; } #header > nav { display: flex; justify-content: space-between; margin-top: auto; padding: .5rem 3rem; } #header > nav > ul { display: flex; padding: 0; list-style: none; } #header > nav > ul > li + li { margin-left: 30px; }

2人がナイス！しています

mik********

質問者2022/5/21 18:14

出来ました、ありがとうございます！ ただひとつお聞きしたいのですが、 li + li というのはどういう意味なのでしょうか？ 今まで見たことがありません…

ThanksImg質問者からのお礼コメント

なるほど、とても勉強になりました！ ありがとうございました！

お礼日時：5/21 19:07

その他の回答（1件）

0
ybb********

カテゴリマスター

2022/5/21 18:07

mik********さん >････画像のようなヘッダーを作りたい･･･････ 色々な方法が有るかと思いますが、こういうのは如何ですか。↓ ＊分かり易いように背景色を付けておきます。＊ <!DOCTYPE html> <html lang="ja"> <head> <style> #header{ display:flex; justify-content: space-between; align-items:end; border:1px #444 solid; height: 100px; width: 1000px; margin: 0 auto; } #header ul{ background:#dfd; display: flex; gap:30px; margin: auto 40px 30px 40px; padding:0; list-style:none ; } </style> </head> <body> <header id="header"> <nav class="menu-left"> <ul> <li> <a href="">top</a></li> <li> <a href="#">menu1</a></li> <li> <a href="#">menu2</a></li> </ul> </nav> <div class="menu-right"> <ul> <li> <a href="#">お問い合わせ</a></li> <li> <a href="#">ログイン</a></li> </ul> </div> </header> </body> </html>