フッターのリストが横並びになってしまいます。

Question

Progate 初級編道場コース　フッター作成　
なぜフッターのリストが縦並びにならないのでしょうか？

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

.footer {
 
  background-color: #2f5167;
  
  /* colorを#fffにしてください */
  color: #fff;
   
  height: 120px;
 
  padding: 40px 40px;
  
  
  
  
  
}


.footer-logo {
  font-size: 32px;
  float: left;
}


.footer-list {
  float:right;
  
  
}


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

Answer 1

Progate 初級編道場コース　フッター作成　
なぜフッターのリストが縦並びにならないのでしょうか？

提供してもらったソースコードを適用した結果、
「会社概要」「採用」「お問い合わせ」は縦に並んでいます。
横並びにはなっていません。

---

「Progate」というタイトルが上、「会社概要、採用、お問い合わせ」を下に配置したい、
ということを言いたいのであれば、floatをコメントアウトすると縦並びに配置されると思います。

.footer-logo {
  font-size: 32px;
  /* こちらをコメントアウト */
  /* float: left; */
}

.footer-list {
  /* こちらをコメントアウト */
  /* float: right; */
}

Comments

[rose_10]

回答ありがとうございます。
コメントアウトしてみたのですが横並びのままになってしまいます。

[new1ro]

何が、横並びなのかがわかっていません。

以下を指定すると問題は解消しますか?
.footer-list li {
display: block;
}

また、現状のキャプチャを貼り付けてもらえると、回答の精度が上げられそうです。

[rose_10]

フッターのリストが本来は縦に並ぶと思うのですが画像のように横並びになってしまうのです。

[new1ro]

上記「画像のように横並びになってしまう」というのは画像のなかの上のほうを指していると認識しています。

ulにdisplay: flex;や、
liにdisplay: inline;、float: left;などが指定されていたりしませんか?

[new1ro]

提供されているソースコード以外にもソースコードがあるような気がするのですが、いかがでしょうか?

Answer 2

li の　css のfloat: left; を消して　.header-list li に　float: left;
.footer-list li に　float: right; をしたらできました。