html - 带有 ul 后跟输入的 Flexbox 行布局

Question

我有一个布局，其中有一个无序列表，后跟一个输入元素。我希望布局是一个连续的行，其中输入将紧接在 item 5 之后。它还将确定输入的最小宽度是否允许它紧跟在 item 5 之后，或者它是否需要继续到该行的下一行。

我显然可以通过将输入放在 ul 中来实现这一点，我也可以将 ul 更改为一堆 div，但是所有这些都没有了从语义上。我如何使用 Flexbox 实现我想要的？

div {
  display: flex;
  width: 160px;
  flex-wrap: wrap;
}

ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

li {
  border: 1px solid gray;
  padding: 2px;
}

input {
  min-width: 40px;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
  <input>
</div>

Answer 1

display: contents; 在 ul 然后 flex:1 用于输入

div {
  display: flex;
  width: 160px;
  flex-wrap: wrap;
}

ul {
  list-style: none;
  display: contents;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid gray;
  padding: 2px;
}

input {
  min-width: 40px;
  flex: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
  <input>
</div>