1

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

这是一个小提琴：http: //jsfiddle.net/zyCkW/7/

我想要实现的是章节列表元素以 0 像素宽度折叠，而子<li>元素（章节段）使用整个#progressbar 的一定百分比向左浮动。如果我让章节<li>元素也浮动或给它们 25% 的宽度，则这些段将不会使用#progressbar 的宽度并变得更小。

问题：

我写的内容在 IE7-9、Firefox 和 Opera 中运行良好，但不幸的是在 Webkit 浏览器（Chrome/Safari）中不适用：章节描述全部位于左侧，而不是像预期的那样位于第一章部分的开头。我想 Webkit 是唯一能正确处理它的浏览器……即使我很欣赏其他浏览器的结果。

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

4

1 回答 1

0

: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%; }

如果可能的话，我仍然会感谢任何更好的解决方案。

于 2012-09-13T08:17:20.630 回答