Javascript 为什么<；李>；标签不在我的滑块上？

我正在尝试创建一个流体滑块宽度：100% 直到我添加了4个以上的项目，它才能正常工作。在4项之后，5项在1项之下

这是

看起来应该是内联的

12345678

但他们却像这样沉入海底

1234
5678

我知道它必须和宽度有关，但当我给父对象添加更多的宽度时，这些项目就会消失 这是我做的一把js小提琴。请帮忙

一,
二,
三,
四,
五,
六,

---

如果ul标签具有

宽度：100px

且每个li标签的宽度

为50px您将看到12、34、56。。。你能想象为什么吗？
问题在于你设置宽度的方式。您有8张幻灯片，因此您必须进行计算：

100/8=12.5

这意味着每张幻灯片的宽度应为12.5%，幻灯片容器的宽度应为800%：

试试这个：

.work-slider ul {
    width: 800%;
}
.work-slider ul li {
    width: 12.5%;
}

Fiddle:
您将它们设置为
显示：内联块
哇，我真不敢相信我错过了。我知道我必须做到800%，但我完全错过了它的发生，很高兴我能帮上忙。
.work-slider ul {
    width: 800%;
}
.work-slider ul li {
    width: 12.5%;
}