如果CSS不等於父寬度，則它等於劃分子寬度

Question

我有一個動態添加元素的水平列表（使用float：left）。它就像是網頁瀏覽器中的任務欄或tabbar。 Li元素具有一定的固定寬度，但是當元素太多並且它們不適合寬度的父元素時，它們的寬度會相等分。我用JavaScript實現了它。每次將元素添加到列表中時，都會計算元素的總寬度，如果元素大於父寬度，則會應用新寬度。我從來不想知道在CSS中是否可能，畢竟它是一個JS應用程序，所以使用JS來計算它沒有任何問題。但如果完全可以在CSS中完成，它會爲我簡化一些事情。

換句話說，我問是否可以使用純CSS的瀏覽器標籤欄。

Answer 1

由於@CBroe建議flexbox可能是你最好的希望。我還添加了文本溢出到我的演示：

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>