【HTML・CSS】ul要素がli要素分の幅を取ってくれない

前提・実現したいこと

ul要素がli要素分取ってほしい

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

li要素がはみ出てしまっている

該当のソースコード

HTML
1<ul>
2  <li>
3    <i class="fab fa-facebook-square facebook"></i>
4  </li>
5  <li>
6    <i class="fab fa-twitter-square twitter"></i>
7  </li>
8  <li>
9    <i class="fab fa-instagram-square instagram"></i>
10  </li>
11</ul>

CSS
1ul {
2  display: flex;
3　list-style: none;
4}
5.facebook,
6.twitter,
7.instagram {
8  color: #555;
9  font-size: 5.4vw;
10}

試したこと

min-width: 0;
display: inline-block;

したが変わらず。

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

アイコンはFontAwesomeを使用しています。

m.ts10806

2020/03/29 06:10

コピペで再現可能なコードをご提示ください。画像だけで判断するのはどんな熟練者でも無理です。

is02

2020/03/29 06:16

すみません、載せました。

hatena19

2020/03/29 06:52

呈示のコードだけでは症状が再現できませんでした。他の部分か影響していると思います。検証ツールでなにが設定されているか確認されてみては。

is02

2020/03/29 09:31

はい、無事直りました。お手数おかけいたしました。

行動規範の内容に同意します

回答1件

自己解決

親要素にfont-size: 0;したら出来ました

投稿2020/03/29 06:45

is02

総合スコア17

m.ts10806

2020/03/29 11:52

そもそもulってfont-size持ってましたっけ

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！