Question

我有一个图像滑块我正在测试以实现到我的投资组合中。我将包含div（carousel）设置为100％宽度。但是，我仍然看到div右侧大约200px的主体背景颜色，这也导致出现水平滚动条。当我尝试检查页面上的元素时，我看到html div作为轮播的宽度，但由于某种原因，设置为body的背景颜色超出了这个范围。

我尝试过更改定位和边距，但无法弄清楚我忽略了什么。这是大元素的css和页面http://marjib.com/test/test1.html

有人请帮忙:)。

body { 
margin:0 auto;
background-color: #333;
}

.carousel {
margin:0;
width:100%;
height:630px;
background-color:#EEE;
position:absolute;
}

.slides {
padding: 0px;
width: 850px;
height: 630px;
margin: 20px auto;
position:relative;

}

.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
top: 0;
opacity: 0;
width: 850px;
height: 556px;
display: block;
position: absolute;

transform: scale(0);

 transition: all .7s ease-in-out;
}

.slide img {
width: 100%;
height: 100%;
}

Answer 1

width:100% .nav-dots删除它，它应该没问题。它取负载文档的宽度，但是当你从左边绝对定位它时，它会将它推到体宽上，从而产生额外的间距。

Answer 2

更改.nav-dots CSS

.nav-dots {
    display: block;
    height: 11px;
    left: 360px;
    position: absolute;
    top: 580px;
}

正文背景延伸过html div

2 个答案: