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

Question

我有一个水平的元素列表，用 display:table-cell 排列。

中间项的内容长度可以变化，并且应该相应地展开。很明显，它的 sibling 应该收缩以为它腾出空间。

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

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

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

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

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

Answer 1

好吧....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 Demo