cssでwidthを指定してdisplayをinline-blockにすると段落ちするのですがどうしたらいいですか

Question

前提・実現したいこと

cssでdisplay: inline-blockと指定すると段落ちして
display: flexを指定すると段落ちしないのですが
この違いはなんですか？

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

display: inline-blockとすると段落ちします

ul {
    width: 900px;
    background-color: red;
    list-style-type: none;
}
li {
    display: inline-block;
    width: 180px;
}

該当のソースコード

    <ul>
      <li><a href="#">text1</a></li>
      <li><a href="#">text2</a></li>
      <li><a href="#">text3</a></li>
      <li><a href="#">text4</a></li>
      <li><a href="#">text5</a></li>
    </ul>

display: flexを指定すると段落ちしません

ul {
    display: flex;
    width: 900px;
    background-color: red;
    list-style-type: none;
}
li {
    width: 180px;
}

試したこと

いろいろ試してdisplay: flexにしたら段落ちしないとわかったのですがそこから先がわかりません

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

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

>いろいろ試してdisplay: flexにしたら段落ちしないとわかったのですがそこから先がわかりません

そこから先をどうしたいのか書かれていないのでアドバイスしようがありません。

[lemo]

どうしてdisplay: inlineとdisplay: flexで挙動が変わるのかです、言葉足らずですみません。

[m.ts10806]

ドキュメントで仕様確認はされましたか？

[lemo]

公式のは見てないですが、記事でinline-blockは横並びに出来て幅と高さを指定できるというのは調べました

[m.ts10806]

大事なのはflexのほうかと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/flex

[lemo]

公式ページ調べてくださってありがとうございました！
解決できました。

Answer 1

親要素にfont-size: 0;、子要素に指定すべきfont-sizeを指定することで、改行を削除しなくてもよくなります。

ul {
    width: 900px;
    background-color: red;
    list-style-type: none;
    font-size: 0; /* ここで0にして */
}
li {
    display: inline-block;
    width: 180px;
    font-size: 16px; /* ここで戻す */
}

または改行をコメントアウトすることでも段落ちは回避できます。

    <ul>
      <li><a href="#">text1</a></li><!-- 
      --><li><a href="#">text2</a></li><!-- 
      --><li><a href="#">text3</a></li><!-- 
      --><li><a href="#">text4</a></li><!-- 
      --><li><a href="#">text5</a></li>
    </ul>

まぁ、display: flex;を指定するのが一番楽です。
親要素にflex-wrap: wrap;を指定する、もしくは子要素にflex-shrink: 0;を指定しなければ、幅に応じて子要素の幅は調整されるので。

Comments

[lemo]

回答ありがとうございます！
いろいろやり方があるのですね、flexを使っていこうと思います。

Answer 2

例えば下記のようにすれば行内に収まります。これは、インラインの場合改行を含む空白（タブも含む）の連続が1つの空白に置き換えられることに起因します。（良い参考ページが見つからなかった･･･）

    <ul><li><a href="#">text1</a></li><li><a href="#">text2</a></li><li><a href="#">text3</a></li><li><a href="#">text4</a></li><li><a href="#">text5</a></li></ul>
```**動くサンプル：**[https://jsfiddle.net/s4L6mk5j/](https://jsfiddle.net/s4L6mk5j/)

---

【inline要素内での改行と空白 - Please Sleep】
[http://please-sleep.cou929.nu/20090107.html](http://please-sleep.cou929.nu/20090107.html)

Comments

[lemo]

pタグのように途中で改行してしまうと空白に置き換えられるのですね、
解決できました、ありがとうございました！