如果子代不适合父级，则CSS均分子项宽度。

Question

我有一个动态添加元素的水平列表(使用float:left)。它类似于浏览器中的任务栏或选项卡。Li元素具有一定的固定宽度，但当元素太多，且不适合于父元素宽度时，它们的宽度是相等的。我在JavaScript中实现了它。每次将元素添加到列表中时，都会计算元素的总宽度，如果元素的宽度大于父级宽度，则应用新宽度。我从来不想知道CSS是否可行，毕竟它是一个JS应用程序，所以使用JS计算它没有什么问题。但是，如果可以完全用CSS来完成，它将简化我的工作。

换句话说，我问是否可以使用纯CSS来做浏览器选项卡栏之类的事情。

Answer 1

正如@CBroe建议的那样，挠曲箱可能是你对此最好的希望。我还在演示中添加了文本溢出：

​

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display:flex;
}
li {
  max-width: 100px;
  border:1px solid black;
  flex:1;
  overflow: hidden;
  text-overflow:ellipsis;
}

<ul>
  <li>Item1</li>
  <li>Item2</li>
</ul>

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
</ul>

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
  <li>Item9</li>
  <li>Item10</li>
  <li>Item11</li>
  <li>Item12</li>
  <li>Item13</li>
  <li>Item14</li>
  <li>Item15</li>
  <li>Item16</li>
</ul>

​