li标签间距引起样式差异

最近在使用bootstrap的轮播图插件carousel时,发现页面样式与插件文档样式不一样,主要是多个li元素间距不同,对比如下图:

我实现的页面:


插件文档提供的页面:


可以看到,我实现的页面中li间距过短。对两个页面仔细对比,发现css没有区别,没办法只能自己加了一个3px的外边距,效果如下:


间距可以了,但是破坏了bootstrap动态修改的margin效果,还是很丑。

其实检查插件文档的li标签可以发现,两个li标签间有一段间距不属于li的margin,应该是来自其他元素,如下图:


对比代码后可以发现,插件文档中li标签间是有换行符的,而我的页面轮播图部分由于是js动态生成的,li标签间没有换行符,js生成的代码如下:

<ol class="carousel-indicators" style="bottom: 5%;"><li data-target="#frontHome_carousel" data-slide-to="0" class=""></li><li data-target="#frontHome_carousel" data-slide-to="1" class="active"></li></ol>

修改代码,加入换行字符\n后就可以实现插件文档的样式了,如下图:


生成的代码如下:

<ol class="carousel-indicators" style="bottom: 5%;"><li data-target="#frontHome_carousel" data-slide-to="0" class="active"></li>
<li data-target="#frontHome_carousel" data-slide-to="1" class=""></li>

</ol>

总结:是个小问题,但是找不到原因很闹心。网上有人总结的是浏览器会把换行字符解释为一个3px的空格,以后页面上一些莫名其妙的间距空格可以先检查这一点。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页