我遇到了一个非常烦人的问题。由于某些原因,我的滑块中的图像设置了填充或边距。我已应用0边距和填充,并添加了
position: absolute;
和
top: 0;
这无助于消除空白。
<div class="slider">
<div class="slide"><img src="http://realtorcatch.com/images/subway2.jpg">
<span>My Text for "FooBar1"!</span></div>
<div class="slide"><img src="http://realtorcatch.com/images/beach2.jpg">
<span>My Text for "FooBar2"!</span></div>
<div class="slide"><img src="http://realtorcatch.com/images/space2.jpg">
<span>My Text for "FooBar3"!</span></div>
</div>
* {
padding: 0;
margin: 0;
}
.slider {margin: 0; padding: 0; position: absolute; top: 0;}
.slide {position: absolute; margin: 0; padding: 0;}
.slide img {display: block; max-width: 100%;}
.slide span {position: absolute; left: 0; top: 50%; text-align: center; width: 100%; font-size: 2em; color: white;}
.bx-controls.bx-has-controls-direction.bx-has-pager {margin-top: -50px;}
你可以在这里看到一个真实的例子:
http://jsbin.com/gizebukisi/edit?html,css,js,output
有人能说出为什么有空白吗?
