用CSS实现ul标签中图片与文字底边对齐及自适应高度

在做页面布局的时候，有时候会遇到在同一个 ul 下 li 标签下的图片不能垂直对齐的问题，使页面不能很表现。遇到此类问题可以使用img标签下margin-bottom样式处理。代码如下：

Html:

<ul>
<li><img src="my.gif" alt="" />文字一</li>
<li><img src="my.gif" alt="" />文字二</li>
<li><img src="my.gif" alt="" />文字三</li>
<li><img src="my.gif" alt="" />文字四</li>
</ul>

Style:

<style type="text/css">
ul
{
margin:0px;
padding:0px;
list-style:none;
}
ul img
{
margin-bottom:-3px;
}
</style>

margin-bottom:-3px; 中的-3可以根据图片和文字大小设置到满意为止。

如果要使得ul标签的高度能够根据li标签的高度自动变化，那只须在ul标签的样式中添加样式“overflow:hidden;”，li标签的样式中添加样式“display:inline;”即可。