Html 图像滑块超过100%宽度
我有一个100%页面宽度的图像滑块,下面是我的代码:Html 图像滑块超过100%宽度,html,css,slider,Html,Css,Slider,我有一个100%页面宽度的图像滑块,下面是我的代码: .ei-slider{ position: relative; width: 100%; max-width: 1920px; height: 400px; margin: 0 auto; border:2px #f36f25 dashed; } .ei-slider-loading{ width: 100%; height: 100%; position: absolu
.ei-slider{
position: relative;
width: 100%;
max-width: 1920px;
height: 400px;
margin: 0 auto;
border:2px #f36f25 dashed;
}
.ei-slider-loading{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index:999;
background: rgba(0,0,0,0.9);
color: #fff;
text-align: center;
line-height: 400px;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{
width: 100%;
}
.ei-title{
position: absolute;
right: 50%;
margin-right: 13%;
top: 30%;
}
.ei-title h2, .ei-title h3{
text-align: right;
}
.ei-title h2{
font-size: 40px;
line-height: 50px;
font-family:Calibri;
font-style: italic;
color: #b5b5b5;
}
.ei-title h3{
font-size: 70px;
line-height: 70px;
font-family:Calibri;
text-transform: uppercase;
color: #000;
}
.ei-slider-thumbs{
height: 13px;
margin: 0 auto;
position: relative;
}
.ei-slider-thumbs li{
position: relative;
float: left;
height: 100%;
}
.ei-slider-thumbs li.ei-slider-element{
top: 0px;
left: 0px;
position: absolute;
height: 100%;
z-index: 10;
text-indent: -9000px;
background: #000;
background: rgba(0,0,0,0.9);
}
.ei-slider-thumbs li a{
display: block;
text-indent: -9000px;
background: #666 ;
width: 100%;
height: 100%;
cursor: pointer;
-webkit-box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
-moz-box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
-ms-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{
background-color: #f0f0f0;
}
.ei-slider-thumbs li img{
position: absolute;
bottom: 50px;
opacity: 0;
z-index: 999;
max-width: 100%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-box-reflect:
below 0px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,0.3))
);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ei-slider-thumbs li:hover img{
opacity: 1;
bottom: 13px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
@media screen and (max-width: 830px) {
.ei-title{
position: absolute;
right: 0px;
margin-right: 0px;
width: 100%;
text-align: center;
top: auto;
bottom: 10px;
background: #fff;
background: rgba(255,255,255,0.9);
padding: 5px 0;
}
.ei-title h2, .ei-title h3{
text-align: center;
}
.ei-title h2{
font-size: 20px;
line-height: 24px;
}
.ei-title h3{
font-size: 30px;
line-height: 40px;
}
}
我不知道为什么,但有一个水平滚动条,我不想要
我还为此创建了一个提琴,以便您可以看到HTML代码以及CSS
小提琴在这里:出于某种原因(我不完全理解),在我的浏览器(最新的firefox)中,有一个系统属性被应用到内部ul,它正在添加40px的填充
您可以修复它(并可能尝试了解为什么使用以下修改的css应用它)
.ei-slider-large {
-moz-padding-start: 0;//<<-- this is the offending style so setting it to 0 sorts out your problem
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.ei滑块大{
-moz padding start:0;//我从上面的代码中看到了两个原因
可能需要将浏览器的默认填充/页边距重置为元素(您可能已经或可能还没有这样做)
*{margin:0;padding:0;}
您的元素有宽度:100%
,但也有一个2px的边框..这增加了宽度,超出了100%的宽度。
下面是一个使用插入框阴影的示例-
我想你可能想应用css重置(这将删除所有填充并标准化css,从而为你提供一个良好的基础css)-尝试Eric Meyers css重置如果你在要覆盖的样式中添加-moz padding start,那么你还应该添加该css的所有其他特定于浏览器的版本(例如,用于Safari、Opera等)