右寄せ縦並びにしたいのですが、横並びになってしまいます。

Question

前提・実現したいこと

Progateの道場編でフッターを作っています。リストを右に寄せ縦並びにしたいのですが、どうしても横並びになってしまいます。

発生している問題・エラーメッセージ

フッターを作っています。float-rightで右に寄せたのですが、横並びになってしまいます。縦並びにしたいのです。
Progateという文字は左に浮かせてあります。

該当のソースコード

  <footer>
       <div class="footer-top">Progate</div>       
       <div class="footer-list">
         <ul>
           <li>会社概要</li>
           <li>採用</li>
           <li>お問い合わせ</li>
         </ul>
       </div>  
  </footer>

footer {
  background-color: #2f5167;
  color: #fff;
  padding: 40px;
  height: 120px;
}
.footer-top {
  font-size: 32px;
  float: left;
}

.footer-list {
  float: right;
}

.footer-list li {
  padding-bottom: 20px;
}

試したこと

list-style:none;やfloat: none;も試してみましたが反応ありませんでした。

補足情報（FW/ツールのバージョンなど）

Progateの環境です。

Comments

[meg_]

やりたいことが分かりませんが、.footer-topのfloat: left;を削除した状態ではどうでしょうか？

[itagagaki]

縦に並ぶリストを右寄せしたいのなら、そうなっているように見えますよ。

[hana_2876]

前提･実現したいことが抜けておりました。申し訳ございません。右に寄せた状態で縦にリストを並べたいです。しかしどうしてもリストが横並びになってしまうのです。

[hana_2876]

.footer-topのfloat: left;削除してみましたが、リストが右寄せ横並びの状態のまま下に下がりました。

[meg_]

>右に寄せた状態で縦にリストを並べたいです。しかしどうしてもリストが横並びになってしまうのです。
リストは縦に並んでいるかと思います。現状の画像を載せてもらえますか？

Answer 1

質問文のコードだけで表示させると期待通りの表示になっていると思われます。
そうなると、質問文に書かれていない何かに原因があると考えられます。

cssファイルの別の箇所で ul 要素に display:flex;などの指定がついていないでしょうか。
検証ツールのStylesリストでul要素のスタイルを確認してみましょう。

Comments

[hana_2876]

解答ありがとうございました。別の部分でCSSでliを指定してコードを書いていて、それがfooter-listのliに影響してしまっていたようです。しっかりクラスまで指定することが大切だということがわかりました。貴方の仰るとおり別の部分に問題がありました。ありがとうございました。