0

我正在尝试在水平对齐的无序列表中底部对齐一些可变大小的链接图像。下面的我的 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;
}
4

1 回答 1

3

添加以下代码

img {
    vertical-align:bottom;
}

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

于 2013-06-24T13:52:45.007 回答