Question

图片下面使用文字（div+css）

在以个<ul><li>里面放的是图片（float：left）</li></ul>
一排4张图片，我想在图片下方 加入文字！
比如 图片是鲜花，我想在下面加入鲜花的价格！应该怎么使用CSS请高手指点

Answer 1

<style type="text/css">
.box{ width:540px; margin:0px auto;}
.box ul{ width:120px; text-align:center; float:left; list-style:none; margin-left:10px; padding:0px;}
.box ul li{ width:120px; float:left; color:#666666;}
.box ul li a{ color:#666666; text-decoration:none;}
.box ul li a:hover{ color:#FF0000; text-decoration:underline;}
</style>
<div class="box">
<ul>
<li><a href="#"><img src="tu.gif" alt="图一" border="0" /></a></li>
<li>名称：<a href="#">图一</a></li>
<li>价格：<a href="#">￥100</a></li>
</ul>
<ul>
<li><a href="#"><img src="tu.gif" alt="图二" border="0" /></a></li>
<li>名称：<a href="#">图二</a></li>
<li>价格：<a href="#">￥200</a></li>
</ul>
<ul>
<li><a href="#"><img src="tu.gif" alt="图三" border="0" /></a></li>
<li>名称：<a href="#">图三</a></li>
<li>价格：<a href="#">￥100</a></li>
</ul>
<ul>
<li><a href="#"><img src="tu.gif" alt="图四" border="0" /></a></li>
<li>名称：<a href="#">图四</a></li>
<li>价格：<a href="#">￥200</a></li>
</ul>
</div>

Answer 2

方法很多..如果是我..我就这么定义..如果不这么做的话..IE的版本不同会导致网页的变形!
一.把ul改成固定宽度..然后FLOAT:LEFT;多加一个LI.LI的float:left;可以删除.
二.在LI里面,加两个<p></p>把图片和文字分别放进去.下面是P的CSS.还可以给P加个CSS <p class="p1">文字或图片</p>
p{
margin:0;
padding:0;
}

Answer 3

给li定义宽度，这个宽度就是图片的宽度喽，然后派生图片img为块元素display:block;还可以margin向下外边距

li{
float:left;width:200px;text-align:center;margin:0px 6px;display:inline;
}

li img{
display:block;margin:0px auto 6px auto;
}