html - 如何对齐 li 元素底部的图像？

Question

如何在 li 元素的底部对齐图像。在我的例子中，我需要微笑与正方形的底部边缘对齐。

http://jsfiddle.net/Jvgrz/

<ul>
    <li>a</li>
        <li>b</li>
        <li><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42"></li>
</ul>


li {
    position: relative;
    width:100px;
    height:100px;
    border: 1px solid red;

}

Answer 1

您可以使用 css 使图像具有绝对位置....像这样。

li img { position: absolute; bottom: 0; }