「ulの幅」を「liの幅×liの数」とすることは可能ですか？

Question

###実現したいこと
以下のHTMLとCSSですが、ulの幅を紫色の幅と同じにできますか？

<nav><ul>
<li>one</li><li>two</li><li>three</li>
</ul></nav>

ul{
display: flex;
list-style: none;
padding: 0;
}
li{
padding: 0 20px;
background: plum;
}

###試したこと
以下のようにfloatを使うとできましたが、できればflexboxでやりたいのです。

ul {
/*display: flex;*/
display: inline-block;
list-style: none;
padding: 0;
}
li{
padding: 0 20px;
background: plum;
float: left;
}

Answer 1

display: inline-flex;を使うと、実装できるのでは、と思います。

ul{
  /* display: flex; */
  display: inline-flex;
  list-style: none;
  padding: 0;
}
li{
  padding: 0 20px;
  background: plum;
}

Comments

[huwatoro]

ありがとうございます。ブロック要素になってしまうことで悩むケースがほかにもたびたびあったのでこれで解決できます。