css - Bootstrap : 在缩略图的右下角添加一个按钮链接

Question

我想做这样的事情：

现在，我正在使用保证金，但我确信有一些“干净”的方法可以做到这一点......：http: //jsfiddle.net/vXMMA/445/

<ul class="media-grid">
  <li>
    <a href="#">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
    </a>
    <a href="#" class="btn" style="margin-left:-23px;margin-top:67px;">+</a>
  </li> 
  <li>
    <a href="#">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
    </a>
    <a href="#" class="btn" style="margin-left:-23px;margin-top:67px;">+</a>
  </li>       

</ul>

Answer 1

这个怎么样

<ul class="media-grid">
  <li>
    <a href="#" style="position:relative;">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
        <button class="btn" style="position:absolute;bottom:5px;right:5px;margin:0;padding:5px 3px;">+</button>
    </a>
  </li> 
  <li>
    <a href="#" style="position:relative;">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
        <button class="btn" style="position:absolute;bottom:5px;right:5px;margin:0;padding:5px 3px;">+</button>
      </a>
  </li>
</ul>

http://jsfiddle.net/xKrXn/1/

Answer 2

试试这个：

ul.media-grid li {
  position: relative;
  display: inline-block;
}

.btn {
  position: absolute;
  bottom: 10px;
  right: 6px;
}

.media-grid a {
  float: none;
  display: inline-block;
}

http://jsfiddle.net/vXMMA/446/