html - 使用绝对位置时如何使列表适合内容

Question

当这个列表相对于父级有绝对位置时，我怎样才能让这个列表适合他的内容？

div {
  width: 100px;
  position: relative;
}
ul {
  position: absolute;
}
li {
  background: red;
}

<div>
  <ul>
    <li>easdas da dsad asd as</li>
    <li>fdsf dsf sd</li>
  </ul>
</div>

编辑:我想实现这个(通过将 width: 140px; 添加到 ul 来实现):

EDIT2:是否有没有 white-space:nowrap 的解决方案，以便能够将 max-width 设置为 li？

Answer 1

您可以将white-space:nowrap 添加到列表项规则中:

div {
  width: 100px;
  position: relative;
}
ul {
  position: absolute;
}
li {
  background: red;
  white-space:nowrap;
}

<div>
  <ul>
    <li>easdas da dsad asd as</li>
    <li>fdsf dsf sd</li>
  </ul>
</div>