製作格填充剩餘寬度：內

Question

我試圖讓另一個DIV 與列表樣式位置填充剩餘空間在數值李：內，但我似乎無法讓它工作。

雖然我可以用列表樣式位置：外並添加間距，因爲它與重疊頁面上的其他元素，我會更喜歡裏面的定位，如果這是可能的。我計劃在名單上超過100個項目。

body { margin: 0; padding: 0; } 
 

 
ul { 
 
    list-style-position: inside; 
 
    list-style-type: decimal; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 100%; 
 
} 
 

 
.myClass { 
 
    display: inline-block; 
 
    width: 100%; /* fill remaining space in the li */ 
 
    height: 20px; 
 
    background: #000; 
 
}

<ul> 
 
    <li><div class="myClass"></div></li> 
 
</ul>

Answer 1

您可以在li使用flex，人數爲僞元素上使用CSS counter，然後設置.myClass到flex-grow: 1

body { margin: 0; padding: 0; } 
 

 
ul { 
 
    list-style-position: inside; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    counter-reset: section;  
 
} 
 

 
li { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
li:before { 
 
    counter-increment: section; 
 
    content: counter(section) ". "; 
 
} 
 

 
.myClass { 
 
    display: inline-block; 
 
    height: 20px; 
 
    background: rgba(0,0,0,0.5); 
 
    flex-grow: 1; 
 
}

<ul> 
 
    <li><div class="myClass"></div></li> 
 
</ul>