質問: 現在、勉強としてブログを作っています。 しかしながら、タイトルの通りナビゲーションバーが横になりません。 どのようにしたら、横にできるでしょうか、 以下のように、コードを書いています。 1index.html ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/c10cf53fe46f747168b7e47f74890932.png) 2CSS ![](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/ca73ee6a0c29ceaa4c9bfad229045ea7.png) 3現在のブログのページ 【白枠の中の文字を縦配置から、横に配置したいです】 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/c99f42098be911b038a95b3f7f7d2ab2.png) お手数をおかけしますが、よろしくお願いいたします。
回答: `.header-navigation li`のコメントを外して`.header-navigation`の`width:100px;`を消すだけでも横並びにはなりそうです。 floatは使いづらい(使用法につまづきやすい)部分があるので`display: flex;`を使ってみてはいかがでしょう。 ``` .header-navigation{ background-color:#fff; padding:20px 0; } ul.header-navigation{ display:flex; } .header-navigation li{ padding: 0 30px; text-align:center; list-style-type:none; } ``` コードは画像ではなく文字で提示していただいた方が回答する側も手打ちしなくて済むので楽になります。 質問は編集できますので検討してください。