Question

banner图居中了，可是就是多了条滚动条

<div class="banner_box"> <div class="banner"> <img src="images/banner.jpg" alt="打造独一无二的微商城" /> </div></div>

/*banner*/.banner_box{ height:550px;}.banner{ position:absolute; margin-left:-960px; left:50%; text-align:center; overflow:hidden;}.banner img{ display:inline-block;}

是我哪里写错了吗。。。。我是参考别人的自适应写的 别人的没有滚动条 我的就有





Answer 1

你的 banner 是整张图片还是背景和图片分开的？

理论上背景和上面文字内容分开的话会比较好一点，节省资源。

当然如果不是分开的也可以。

【解决方法】你要把 banner 当做背景图片来看待，也就是在 CSS 里定义 background，直接确定位置 center 就可以了。

【原因】会出现滚动条的原因应该是图片宽造成的。

比如，我用了一个 2000*470 的图片，理论上这个图片放在浏览器上以后肯定是要出现横向滚动条的，那现在直接把你做好的图片当做背景来处理：

.banner {
	 background:url(file:///L|/I_web/images/study/bannerai.jpg) center;
 }

然后，看你的图片是怎么做的。刚才我说如果你的图片和背景是分开独立的话：

<div class="banner">
	<img src="file:///L|/I_web/images/study/picture.png" />
</div>

如果不是分开的，而是整张图片的话，就不需要再给 img 标签

直接div 调用 banner 样式就可以：

<div class="banner">
	&nbsp;
</div>

 【注意】我随便放了个 url 的地址，这个你要根据你图片的位置改一下；

css 部分你原来的还是不变，或者根据实际效果将位置稍作调整