Question

我正在尝试在水平对齐的无序列表中底部对齐一些可变大小的链接图像。下面我的HTML + CSS大部分都是诀窍。只有一个小问题：图像下方的间隙（http://jsfiddle.net/ymSvr/）。正如你所看到的，我正在使用绝对定位来使图像粘在底部。但即使使用bottom: 0，图像仍然没有完全显示在底部。

有人可以解释为什么会这样吗？我该如何解决这个问题？

标记：

<ul>
  <li>
    <div class="outer">
      <div class="inner">
        <a href="javascrip:void(0)">
         <img src="http://lorempixel.com/output/animals-h-c-132-200-5.jpg" />
        </a>
      </div>
    </div>
  </li>
  <li>
    <div class="outer">
      <div class="inner">
        <a href="javascrip:void(0)">
         <img src="http://lorempixel.com/output/animals-h-c-132-165-4.jpg" />
        </a>
      </div>
    </div>
  </li>
  <li>
    <div class="outer">
      <div class="inner">
        <a href="javascrip:void(0)">
         <img src="http://lorempixel.com/output/animals-h-c-132-190-9.jpg" />
        </a>
      </div>
    </div>
  </li>
</ul>

CSS ：

ul li { 
    display:inline-block;

}

.outer {
    background-color: #c0c0c0;
    display: block;
    height: 242px;
    position: relative;
    width: 200px;
}

.inner {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

Answer 1

添加以下代码

img {
    vertical-align:bottom;
}

http://jsfiddle.net/ymSvr/1/

如何摆脱绝对定位内容下方的差距？

1 个答案: