teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2020/03/06 09:53

投稿

soliste16
soliste16

スコア757

answer CHANGED
@@ -1,1 +1,4 @@
1
- 原因は`ul`の高さを指定してないことです。高さのない`ul`にBootstrapによって`margin-bottom: 1rem`が設定されているためこのようなことが起きています。`ul`の`margin`を0に書き換えるか、`li`の`line-height`を80pxにしているのであれば、`ul`の高さも80pxにすることで解決します。
1
+ 原因は`ul`の高さを指定してないことです。高さのない`ul`にBootstrapによって`margin-bottom: 1rem`が設定されているためこのようなことが起きています。`ul`の`margin`を0に書き換えるか、`li`の`line-height`を80pxにしているのであれば、`ul`の高さも80pxにすることで解決します。
2
+
3
+ **追記**
4
+ `float`を適用した子要素は親要素から浮いた形となり、`ul`は要素を持たなくなるので高さが0となります。上記の方法以外にも、別の要素に影響を与えないようにするため`ul`に`overflow: hidden`を書き加えて`float`状態を解除する方法もあります。こちらの方が良いかもしれません。