文章/答案/技术大牛

发布

问EasySlider和CSS玩得不好
EN

Stack Overflow用户

提问于 2011-05-14 14:37:58

回答 1查看 721关注 0票数 1

我只是想知道你能否告诉我为什么www2.chrislrobinson.co.uk的滑块不能正常工作。我已经从他们的例子中删除了代码。当页面第一次加载时，它似乎工作得很好，但是如果您刷新，图像会被拉伸到整个页面，并且非常薄(即高度和宽度会被扭曲)。

下面是相关的HTML：

<body>
<div id="container">  
...
<div id="mainContent">
...
    <div id="slider"> 
        <ul>                
            <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>          
        </ul> 
    </div>

而翻译的CSS：

#slider ul,  #slider li{
margin:0;
padding:0;
list-style:none;
}   

#slider,  #slider li{ 
width:696px;
height:241px;
overflow:hidden; 
}

body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000 url('images/bg.png') no-repeat top center;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}

#container { 
width: 804px;  /* this will create a container 80% of the browser width */
background: transparent;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
/*border: 2px solid rgba(255,255,255,1);*/
} 

#mainContent {
background: rgba(60,60,60,0.75) no-repeat top center;
width: 800px; 
border: 2px solid rgba(184,0,31,1); 
padding: 0px;
min-height: 600px;
-moz-border-radius: 10px; 
-khtml-border-radius: 10px; 
-webkit-border-radius: 10px; 
min-height: 400px;
clear: both;
} 

span#prevBtn{}

span#nextBtn{}

谢谢!克里斯

编辑：，如果您继续刷新它，它最终会再次工作一段时间！但这并不是真正的解决办法。

编辑2:我发现当它奇怪地显示时，这就是：

<div id="slider" style="width: 953px; height: 18px; overflow-x: hidden; overflow-y: hidden; ">，有人知道为什么这种情况会改变吗？

easyslider

html

css

回答 1

Stack Overflow用户

发布于 2011-05-14 15:36:41

我查看了您的源代码，我建议的第一件事是使用重置样式表t或* {margin:0;padding:0}，这将在所有浏览器上重置所有css属性。

然后在#slider, #slider li上添加。

 #slider, #slider li {width:600px;height:200px}

这将帮助你实现你的目标。

编辑：，如果您想对幻灯片进行中心设置，请添加

{margin:0 auto}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6002506

复制

相似问题

问EasySlider和CSS玩得不好
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问EasySlider和CSS玩得不好EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问EasySlider和CSS玩得不好
EN