サイトの名前の横に、横並びでナビゲーションバーを作成したい
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/index.css"> 7 </head> 8 <body> 9 <header> 10 <p> 11 <a href="index.html">○○サイト</a> 12 </p> 13 <nav> 14 <ul> 15 <li><a href="#">記事一覧</a></li><li><a href="#">Q&A</a></li><li><a href="#">その他</a></li> 16 </ul> 17 </nav> 18 </header> 19 </body> 20</html> 21
css
1body{ 2 margin: 0; 3 padding: 0; 4} 5header{ 6 background: skyblue; 7 width: 100%; 8 height: 100px; 9 position: fixed; 10} 11header p{ 12 margin: 0; 13 padding: 0px; 14} 15header p a{ 16 text-decoration: none; 17 color: white; 18 font-size: 3em; 19} 20header nav ul{ 21 font-size: 0; 22} 23header nav ul li{ 24 display: inline-block; 25 border: 1px solid black; 26 padding: 10px; 27 font-size: 16px; 28} 29header nav ul li a{ 30 text-decoration: none; 31 color: white; 32} 33
###やりたいこと
「サイト名→ナビゲーションバー」
という風にやりたいのですが、サイト名の下にナビゲーションバーが来てしまっていて、横並びにできない状態です。
サイト名、ナビゲーションバーは中央揃えではなく左から順にしたいです。
やったこと
display: inline
display: inline-block
に変えてみたりしてみましたが、横並びにはできませんでした。
position: absolute
にしてtop:
やleft:
などを弄ってみましたが、綺麗に並びませんでした。(←このやり方で正しいのか解りません)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/17 11:17