我为一个在线教育网站创建了一个灵活的进度条，它分为章节和章节段。它必须在现代浏览器中具有灵 active ，因为该元素将具有响应能力。
这是一个 fiddle :http://jsfiddle.net/zyCkW/7/
我想要实现的是章节列表元素以 0 像素宽度折叠，而 child <li>元素(章节段)使用整个#progressbar 的一定百分比向左浮动。如果我让章<li>元素也 float 或给它们 25% 的宽度，这些段将不会使用 #progressbar 的宽度并变得更小。
问题:
我写的东西在 IE7-9、Firefox 和 Opera 中运行良好，但不幸的是在 Webkit 浏览器(Chrome/Safari)中不行:章节描述都位于左侧，而不是像预期的那样位于第一章片段的开头.我想 Webkit 是唯一能正确处理它的浏览器……即使我欣赏其他浏览器的结果。
有没有我可以在 Webkit 中解决这个问题的解决方案，最好不要使用 Javascript？
最佳答案
我通过使用 :nth-child 伪选择器定位剩下的章节描述来解决这个问题。
#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%; }
如果可能的话，我仍然很感激任何更好的解决方案。
关于html - 具有使用嵌套列表元素的章节段的灵活进度条在 Webkit 浏览器中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12386246/