求DIV +CSS 四张图片横向排列代码。
以下是我排列的图片，但是我排列出来不是平行的,出现的效果是梯形的，也就是第一张是好的，第二张比第一张要低几个像素，第三张比第二张低几个像素，一次类推。我始终把他们放不到一...
以下是我排列的图片，但是我排列出来不是平行的,出现的效果是梯形的，也就是第一张是好的，第二张比第一张要低几个像素，第三张比第二张低几个像素，一次类推。我始终把他们放不到一条平行线上。请教高手帮我下。。。。
<body>
<div class="inimg">
<ul>
<li><a href="#"><img src="image/jiu.jpg" width="125px" height="190px" border="1" alt="维多利亚蒙蒂山西.." /><br /><br />维多利亚蒙蒂山西..<p><font color="#666666">Monty's Hill vic..</font></p><p>会员价:<font style="color:#FF0000;">82</font>元</p><p>市场价：<font style="font-size:12px; color:#666666; text-decoration:line-through;">116</font>元</p></a></li>
<li><a href="#"><img src="image/jiu1.jpg" width="125px" height="190px" border="1" /></a></li>
<li><a href="#"><img src="image/jiu2.jpg" width="125px" height="190px" border="1" /></a></li>
<li><a href="#"><img src="image/jiu3.jpg" width="125px" height="190px" border="1" /></a></li>
</ul>
</div>
</body>
<style>
.inimg{text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;}
.inimg ul{list-style-type:none;}
.inimg li a{
float:left;
list-style-type:none;
margin-left:5px;
text-decoration:none;
color:#000;}
</style> 展开
<body>
<div class="inimg">
<ul>
<li><a href="#"><img src="image/jiu.jpg" width="125px" height="190px" border="1" alt="维多利亚蒙蒂山西.." /><br /><br />维多利亚蒙蒂山西..<p><font color="#666666">Monty's Hill vic..</font></p><p>会员价:<font style="color:#FF0000;">82</font>元</p><p>市场价：<font style="font-size:12px; color:#666666; text-decoration:line-through;">116</font>元</p></a></li>
<li><a href="#"><img src="image/jiu1.jpg" width="125px" height="190px" border="1" /></a></li>
<li><a href="#"><img src="image/jiu2.jpg" width="125px" height="190px" border="1" /></a></li>
<li><a href="#"><img src="image/jiu3.jpg" width="125px" height="190px" border="1" /></a></li>
</ul>
</div>
</body>
<style>
.inimg{text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;}
.inimg ul{list-style-type:none;}
.inimg li a{
float:left;
list-style-type:none;
margin-left:5px;
text-decoration:none;
color:#000;}
</style> 展开
3个回答
展开全部
<style>
body{ margin:0px; padding:0px;}
h1,h2,h3,h4,h5,h6,p,form,div,ul,li,img{ margin:0px; padding:0px;}
.inimg{text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.inimg ul{list-style-type:none; float:left;}
.inimg li a{list-style-type:none;margin-left:5px;text-decoration:none;color:#000;}
.clear{ clear:both; margin:0px; padding:0px;}
</style>
<body>
<div class="inimg">
<ul>
<li><a href="#"><img src="image/jiu.jpg" width="125px" height="190px" border="1" alt="维多利亚蒙蒂山西.." /><br /><br />维多利亚蒙蒂山西..<p><font color="#666666">Monty's Hill vic..</font></p><p>会员价:<font style="color:#FF0000;">82</font>元</p><p>市场价：<font style="font-size:12px; color:#666666; text-decoration:line-through;">116</font>元</p></a></li>
<li><a href="#"><img src="image/jiu1.jpg" width="125px" height="190px" border="1" /></a></li>
<li><a href="#"><img src="image/jiu2.jpg" width="125px" height="190px" border="1" /></a></li>
<li><a href="#"><img src="image/jiu3.jpg" width="125px" height="190px" border="1" /></a></li>
<div class="clear"></div>
</ul>
</div>
</body>
body{ margin:0px; padding:0px;}
h1,h2,h3,h4,h5,h6,p,form,div,ul,li,img{ margin:0px; padding:0px;}
.inimg{text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.inimg ul{list-style-type:none; float:left;}
.inimg li a{list-style-type:none;margin-left:5px;text-decoration:none;color:#000;}
.clear{ clear:both; margin:0px; padding:0px;}
</style>
<body>
<div class="inimg">
<ul>
<li><a href="#"><img src="image/jiu.jpg" width="125px" height="190px" border="1" alt="维多利亚蒙蒂山西.." /><br /><br />维多利亚蒙蒂山西..<p><font color="#666666">Monty's Hill vic..</font></p><p>会员价:<font style="color:#FF0000;">82</font>元</p><p>市场价：<font style="font-size:12px; color:#666666; text-decoration:line-through;">116</font>元</p></a></li>
<li><a href="#"><img src="image/jiu1.jpg" width="125px" height="190px" border="1" /></a></li>
<li><a href="#"><img src="image/jiu2.jpg" width="125px" height="190px" border="1" /></a></li>
<li><a href="#"><img src="image/jiu3.jpg" width="125px" height="190px" border="1" /></a></li>
<div class="clear"></div>
</ul>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.inimg { width:100px}
.inimg ul{ padding:0; margin:0}
.inimg ul li{ float:left; width:25px; height:25px}
父容器inimg的宽度 和你的 li的宽度和高度是关键 另外给li 加上 display:inline的属性
.inimg ul{ padding:0; margin:0}
.inimg ul li{ float:left; width:25px; height:25px}
父容器inimg的宽度 和你的 li的宽度和高度是关键 另外给li 加上 display:inline的属性
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把float:Left这个加到Li上面，不要加给a标签
呈现阶梯状的，不论是文字还是图片，首先考虑浮动问题，一般都是要清浮动
呈现阶梯状的，不论是文字还是图片，首先考虑浮动问题，一般都是要清浮动
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
