我想在div中插入十张图片,我代码是用<ul><li>的。

发布网友 发布时间：2022-04-21 09:53

我来回答

共2个回答

懂视网 时间：2022-04-21 14:14

直接上代码吧

如上面的代码，用的无序列表标签，现在的想法是想吧li里面的图片放到div图片里面，但是我发现，如果把div的图片放入css，这样li的图片才能在div里面，但是如果直接在div里面插入图片，li的图片就会出现在div的下面，由于客观原因，css里面只能填充背景色，不能插入图片，所以求div里面插入图片，并且让li的图片显示在div里面，多谢了，现在的情况是这个样子的 。看截图

回复讨论(解决方案)

用绝对定位。

相对定位实现，css代码如下：

	div{width:991px;height:559px;margin:100px auto; position:relative;} div ul{padding:0; position:absolute; left:0px; top:0px; z-index:9;} *{list-style:none}

谢谢，已经解决，用的确实是相对定位，不过是对li进行的

热心网友 时间：2022-04-21 11:22

设置div的宽度和li的宽度 设置li为float:left
<div>
<ul>
<li><a><img src="#" /></a></li>
<li><a><img src="#" /></a></li>
<li><a><img src="#" /></a></li>
<li><a><img src="#" /></a></li>
<li><a><img src="#" /></a></li>
<li><a><img src="#" /></a></li>
<li><a><img src="#" /></a></li>
<li><a><img src="#" /></a></li>
<li><a><img src="#" /></a></li>
<li><a><img src="#" /></a></li>

</ul>

</div>
div{width:600px;}
ul{width:580px;padding:10px;}

ul li{width:100px;float:left;margin-right:10px;}
ul li a{width:100px;height:100px;border:1px solid #D6D6D7;display:table-cell;text-align:center;vertical-align:middle;*display: block;*font-size:87px;*font-family:Arial;}//图片居中
ul li a img{vertical-align:middle;}