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

Question

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

中间项的内容长度可以变化，应该相应地展开。显然它的兄弟姐妹应该缩小到 space。

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

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

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

Oneline horizontal list with middle item that fits its content width

css

responsive-design

inline

nowrap