Question

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

排列

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

以下是我迄今为止所做的一个示例：

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

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

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

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

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Codepen Demo

Oneline水平列表，其中间项目符合其内容宽度

1 个答案: