我正在尝试将图像放入我的 div,这是 div。
#Div3 {
margin-left: 0px;
margin-top: 0px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #906;
width: 960px;
padding-top: 0px;
height: 202px;
}
html > body # Div3 {
height: auto;
min-height: 203px;
}
图片css如下。
/* rotator in-page placement */
div.rotator {
position: relative;
width: 960px;
height: 202px;
margin-left: 15px;
display: none;
} /* rotator css */
div.rotator ul li {
float: center;
position: absolute;
list-style: none;
}
div.rotator ul li.show {
z-index: 500
}
在我的 html 页面上我有这个。
<div id="Div3" class="rotator">
<ul>
<li class="show"><a href="#link1"><img src="./first.jpg" width="960" height="202" alt="pic1" /></a></li>
<li><a href="#link2"><img src="./second.jpg" width="960" height="202" alt="pic2" /></a></li>
<li><a href="#link3"><img src="./third.jpg" width="960" height="202" alt="pic3" /></a></li>
<li><a href="#link4"><img src="./fifth.jpg" width="960" height="202" alt="pic4" /></a></li>
</ul>
</div>
结果是图像显示了,但没有像我想要的那样完全适合 div。可能是什么问题?
最佳答案
首先,我认为您需要重置标准边距/填充:
li, ul {
margin: 0;
padding: 0;
}
其次,我认为您的定位不正确,float:center
不存在,并且当您使用 absolute
定位时,无论如何您都不会 float 。
它也可能有助于添加一个特定的位置:
div.rotator ul li {
position: absolute;
list-style: none;
top: 0;
left: 0;
}
哦,list-style
里面没有空格...
关于css - 将图像放入 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4691572/