Question

我有一个动态添加元素的水平列表（使用float：left）。它类似于Web浏览器中的任务栏或tabbar。 Li元素具有一定的固定宽度，但是当元素太多并且它们的宽度不适合父元素时，它们的宽度被平均分配。我用JavaScript实现了它。每次将一个元素添加到列表中时，都会计算元素的总宽度，如果它大于父宽度，则应用新的宽度。我从来没有想过它是否可能在CSS中，它毕竟是一个JS应用程序，因此使用JS来计算它并没有错。但如果它可以完全用CSS完成，那么对我来说会简化一些事情。

换句话说，我问是否可以使用纯CSS做浏览器标签栏。

Answer 1

正如@CBroe建议flexbox可能是你最好的希望。我还在我的演示中添加了文本溢出：

＆＃13;

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

＆＃13;

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

＆＃13;

如果孩子不适合父母，CSS会平均分配儿童宽度

1 个答案: