这个纯 CSS 的幻灯切换效果里面有个 BUG？怎么解决？

[Hack38]

http://www.cssscript.com/demo/pure-css-content-slider-with-keyboard-navigation/
具体点完左右就知道了，左侧会累加，右侧则会减少，然后多于10张之后就完全变了，根本就点不着了。

有没有人明白我的意思？怎么解决？

[abelyao]

应该是几个 label 之间的空隙造成的，这个 demo 做得比较简陋，就是提供了一个思路，自己重写应该可以实现，同时不会有这个问题

[Hack38]

@abelyao label之间不都用了100%表示了吗？这个要怎么计算才能精确？

[abelyao]

@Hack38 我看了一下它的代码，幻灯片的移动，采用的是 translate3d 属性，我觉得应该不需要用到这个，我也来做一个试试看，有意思

[abelyao]

@Hack38
话说这里 http://www.oschina.net/question/5189_34649 有个效果更赞的，你可以看一下…

[Hack38]

@abelyao 那个不好，我要全屏的。我发的那个要不是有那种小BUG，我就心满意足了。代码少，简洁。

[abelyao]

@Hack38 那我也来“借鉴”一下做个全屏的，不知道你有要求全屏

[abelyao]

@Hack38
我直接用它的代码测试了一下，其实就是 label 之间有空格（换行）导致的，你试试不要换行，每个 label 标签都连在一起，就不会了

[Hack38]

@abelyao
你是如何发现的？
<label for="slide1">Slide 1</label><label for="slide2">Slide 2</label><label for="slide3">Slide 3</label><label for="slide4">Slide 4</label>

这玩意儿害我不浅啊！

[emric]

inline-block 的关系中间的空格和制表符会产生间隙.

[abelyao]

@Hack38 @emric
#9 的朋友说对了，是 inline-block 的问题，但是去掉 inline-block 则问题更大 -.-
按照它这个思路重写一个吧

[crs0910]

外层font-size:0;里层font-size恢复正常

[acthtml]

这个幻灯想法很独特啊，赞一个。

[Execution]

链接挂了，我这边打不开。

[pcar]

思路不错，用的for属性。但是这样语义化就不好了。