用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;”即可。