制作格填充剩余宽度：内

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>