回答編集履歴
1
追記
answer
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
フロー
|
|
1
|
+
フロートさせているのが原因なので、ol に[ブロック整形コンテキスト](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Block_formatting_context)を持たせると解決します。
|
|
2
2
|
たとえば：
|
|
3
3
|
|
|
4
4
|
```css
|
|
5
5
|
.songs {
|
|
6
6
|
display: flow-root;
|
|
7
7
|
}
|
|
8
|
-
```
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
なお、横並びにする目的でフロートを使うのはかなり時代遅れで、問題も多いためお勧めできませんので、フレックスレイアウトなどをご検討ください。
|
|
13
|
+
[CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門 - ICS MEDIA](https://ics.media/entry/13117/)
|