css - 具有适合其内容宽度的中间项目的单行水平列表

Question

我有一个水平项目列表，按 display:table-cell 排列。

中间项的内容长度可以不同，它应该相应地扩展。显然，它的兄弟姐妹应该缩小以腾出空间。

这是我到目前为止所做的示例：

http://codepen.io/Pictor13/pen/mJoyXw

但是当内容增长时，中间项目仍然溢出右兄弟。

有没有可能实现我想要的？是display: table-cell和white-space: nowrap正确的方法吗？

注意：宽度（如果指定）应始终是通用的，而不是固定为特定的 px/em。

Answer 1

Wellll....flexbox可以做到这一点。

.container {
  background-color: yellow;
  padding: 1px;
}
li {
  text-align: center;
  border: 2px solid #ccc;
  background-color: green;
  color: red;
  list-style: none;
}
ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  margin: 3px;
  background-color: brown;
}
li {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}
input {
  width: 270px;
  width: inherit;
}
form {
  background-color: blue;
  margin: 0;
  padding: 0;
}

<div class="container">
  <ul class="list">
    <li>B</li>
    <li>C</li>
    <li class="middle">
      <form>
        <input type="number" value="123123418190238901390812903823" min="1" max="123012301232138192738798127398712983" />
        <span>to page and with some long  content</span>
        <button>go</button>
      </form>

    </li>
    <li>E</li>
    <li>A</li>
  </ul>
</div>

Codepen 演示