Html 灵活的progressbar，带有章节段，使用嵌套列表元素，在Webkit浏览器中不起作用

对于一个在线教育网站，我创建了一个灵活的progressbar，它分为章节和章节。在现代浏览器中，它必须是灵活的，因为项目将是响应性的

这是一把小提琴：

我想要实现的是，章节列表元素以0像素宽度折叠，而子元素（章节段）使用整个#进度条的一定百分比向左浮动。如果我让chapter

元素也浮动，或者给它们25%的宽度，那么这些片段就不会使用#progressbar的宽度，并且变得更小

问题：

我写的东西在IE7-9、Firefox和Opera中效果很好，但不幸的是在Webkit浏览器（Chrome/Safari）中效果不好：章节描述都放在左边，不像预期的那样，放在第一章的开头。我想Webkit是唯一能正确处理它的浏览器。。。即使我欣赏其他浏览器的结果

---

在Webkit中有没有一个解决方案可以解决这个问题，最好不用Javascript？

我通过使用

：第n个子项

伪选择器定位留下的章节描述来解决这个问题

#progressbar ol>li:nth-child(2) span { left: 23.076%; }
#progressbar ol>li:nth-child(3) span { left: 53.844%; }
#progressbar ol>li:nth-child(4) span { left: 76.92%; }

如果可能的话，我仍然希望有更好的解决方案