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

画像

HTML、CSS32閲覧

ベストアンサー

2

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

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

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

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

お礼日時:5/21 19:07

その他の回答(1件)

0

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>