内联块不适用于一个元素

Question

我的网页页面上有四个链接。我已将白色背景颜色的悬停样式设置为文本链接，并且还显示：inline-block;＆＃34;。当我将鼠标悬停在这些链接上时，它们看起来像这样：

Inline-block并不总是在Facebook链接上工作，这意味着它取决于屏幕大小。我无法弄清楚它为什么会这样。我正在使用Bootstrap来完成我的工作。

这是这两个链接的HTML：

<div class="col-sm-3" id="addr"> <a href="https://goo.gl/maps/ny3wV" title="Asukoht" target="_blank"><img src="images/location.png" alt="asukoht" title="Asukoht"/></a> <a href="https://goo.gl/maps/ny3wV" title="Asukoht" target="_blank">
          <p>Jansuki Shop<br />
            Müürivahe 17<br />
            Tallinn </p>
          </a> </div>
        <div class="col-sm-3" id="fb"> <a href="https://www.facebook.com/8Delfiini" title="Facebook" target="_blank"><img src="images/fb.png" alt="Facebook" title="Facebook"/></a> <a href="https://www.facebook.com/8Delfiini" title="Facebook" target="_blank">
          <p>8 Delfiini Facebookis</p>
          </a> </div>

这就是CSS：

#addr p, #fb p
{
    margin: 0;
    padding: 0;
    display: inline-block;
}

#addr p:hover, #fb p:hover
{
    background-color: rgb(255,255,255);
    color: rgb(157,52,46);
    text-decoration: none;  
}

我试图检查它，我发现Facebook p标签有一个更宽的填充或容器（我不知道如何调用它），而不是属于地址部分的p标签。我知道我不应该在这里发布我的项目链接，但如果有人可以帮助我，我会非常高兴。提前谢谢。

Answer 1

您是否尝试为内联块设置宽度和高度？