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

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

 

Html:

 

       

           
• 文字一

           
• 文字二

           
• 文字三

           
• 文字四

       

 

Style:

 

  

 

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

 

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