如何避免内联列表项扩展动态容器，而是环绕动态容器？

Question

div {
  border: 1px solid black;
  display: inline-block;
  position: relative;
}

li {
  display: inline-block;
}

ul {
  padding: 0;
  position: absolute;
}

<div>
  <p>This is line of text one</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <p>This is line of text two</p>
</div>

我想要<p>中的任何一个（或其他，而不仅仅是<p>）来控制容器的宽度，因此我将容器设置为inline-block。但是我不希望ul控制它。我希望它适应于设置的宽度其他元素并环绕它。

[我唯一能够做到这一点的方法就是保持绝对立场，这总是要解决一些问题。

我不想设置任何宽度，因为<p>可以自由更改。

<li>的数量也是动态的，因此我无法确定每行列表项的数量。

Answer 1

在现代浏览器中，您可以在width: max-content父级上使用div属性：