链接扩展到图像之外的空间答案

【问题标题】：Link extends to space outside of image链接扩展到图像之外的空间
【发布时间】：2015-02-26 04:30:54
【问题描述】：

编辑：想通了，底部有解释

我有一个链接到更大图像的缩略图库。我正在使用引导程序 3。

有些图像不会填满整个列，并且每个图像之间的空间量不同（但引导程序会正确对齐它们）。出于某种原因，额外的空间是“可点击的”。我希望唯一的图像是可点击的。我该怎么做？

代码的相关部分以<div class="row">开头。

<body>
{% include "gallery_navbar.html" %}
<div class="tab-content">
  {% for pane_name, reddit_posts in reddit_posts_by_pane.items %}
    {% if pane_name == "food"  %}
      <div role="tabpanel" id="{{ pane_name }}" class="tab-pane active">
    {% else %}
      <div role="tabpanel" id="{{ pane_name }}" class="tab-pane">
    {% endif %}
    {% if reddit_posts %}
      <div class="row">
        {% for reddit_post in reddit_posts %}
          <div class="col-lg-4 col-sm-4 col-xs-6">
            <a data-rel="prettyPhoto[asd]" title="Image {{ reddit_post.rank }}" href="{{ reddit_post.submitted_link }}" style="display:block; height:100%; width:100%;">
              <img class="thumbnail center-block" data-src="{{ reddit_post.submitted_link }}">
            </a>
          </div>
        {% endfor %}
      </div><!--end row-->
    {% endif %}
  </div><!-- end tab-pane-->
  {% endfor %}
</div><!--end tab-content-->

编辑：额外的水平链接空间随着display: inline-block 而消失，但底部填充/边距仍然链接到链接。我可以使用margin-bottom=0px 删除底部填充，但我还没有找到添加底部填充的方法。

edit2：我无法更改行 div 标记，甚至无法通过添加另一个类（如“row-padded”来实现）：

 <div class="row row-padded">

使用 CSS： .row-padded{ margin-bottom:30px}

所以我只是绕道而行，在链接顶部添加了一个 div 标签。

【问题讨论】：

您至少还需要发布 CSS。另外，您尝试了什么以及为什么它不起作用。

标签： html css twitter-bootstrap

【解决方案1】：

试试这个，像下面这样改变 html

<div class="row">

          <div class="col-lg-4 col-sm-4 col-xs-6 text-center"><!--add class text-center-->

            <a data-rel="" title="" href="" style="display: inline-block;"> <!-- change style attribute -->
              <img class="thumbnail align-center" src="" style="margin-bottom:0px;"><!-- remove class center-block and add style attribute    -->
            </a>
          </div>
</div>

工作演示 http://jsfiddle.net/qb7xnfbd/

【讨论】：

谢谢，display: inline-block; 修复了水平链接“空格”。你有没有机会知道如何在不删除style="margin-bottom:0px; 的空间的情况下修复底部的额外空间？我一直在 div 类行上使用 padding-bottom 和 margin-bottom ，但它似乎没有改变任何东西。

【解决方案2】：

img 标记显示为内联文本，位于文本基线上，其下方有空间用于任何字符的下划线和下划线。

将img 显示为一个块可以解决此问题。

试试：

a > img:only-child {
  display: block;
}

这使得作为父 a 唯一子级的图像显示为一个块。

可以在此处找到关于为什么会发生这种情况的详细说明：http://doctype.com/anchor-tag-containing-only-img-extends-below-bottom-image

【讨论】：