Question

我正在使用Ajax创建一个图像滑块，但是在我的HTML部分添加div时出现问题，所以我可以将滑块居中...下面我添加了centerSliderDiv来居中它，但是不起作用。我尝试添加一个简单的背景颜色来测试，但这也不起作用。不确定为什么centerSlideDiv不工作！有什么想法吗？

谢谢

<div id = "centerSlideDiv">
                <button class="prev">
                    Previous
                </button>
                <div id="images">
                    <div>
                        <img src='firstImage.jpg'/>
                    </div>
                    <div>
                        <img src='secondImage.jpg'/>
                    </div>
                    <div>
                        <img src='thirdImage.jpg'/>
                    </div>
                </div>
                <button class="next">
                    Next
                </button>
            </div>

CSS：

button {
    float: left;   
}
#images div {
    border: 1px solid #000;
    float: left; 
    height:209px;
    margin: 5px;
    text-align: center;
    width: 300px;

}

#centerSlideDiv{
    width: 1000px;
    margin: 0 auto;
    background-color:green;
}

Answer 1

改变这个：

#images div {
    border: 1px solid #000;
    float: left; 
    height:209px;
    margin: 5px;
    text-align: center;
    width: 300px;

}

到此：

#images div {
    border: 1px solid #000;

    height:209px;
    margin: 5px;
    text-align: center;
    width: 300px;

}

点击此演示：DEMO 我为您更新了演示，请点击此链接：DEMOUPDATE

Answer 2

添加溢出：隐藏;到你的#centerSlideDiv它应该可以工作。

#centerSlideDiv{
    width: 1000px;
    margin: 0 auto;
    background-color:green;
    overflow:hidden;
}

图像滑块Div错误

2 个答案: