Question

好的，今天我的脑子坏了，我无法解决这个基本问题。我希望在图像下面有一个LINK。图像可能有不同的宽度，让我们说有些宽度为100px，有些宽度为200px：

<div>     
    <img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;">
    <a href="link.php" style="display: inline-block;background-color:blue">WORDS</a>
</div>

如果我将链接的显示设置为内联块，它只占用所需的空间＆＃34;单词＆＃34;。如果我将它设置为阻止，div会拉伸以适应它，它占用了100％的可用空间，并且宽度超过5倍，比图像宽得多。

我希望链接占据div的整个宽度，我希望div与图像一样宽（加上填充）。

如果我设置div的宽度（以像素为单位），如果图像宽度不同，它看起来并不正确。我在这里缺少什么？

Answer 1

设置链接样式display:block;，并为您的图片添加width="100%"

Answer 2

父div将自动设置为display: block，它将跨越整个页面长度。如果将父div设置为display: inline-block，则div将仅与图像一样宽。然后使用width: 100%设置链接，这样可以为您提供所需的结果。

这是一个Fiddle，你可以看到我的意思。

我更新了小提琴以包含2个不同大小的图像。关键是你必须包装每个图像并链接到一个新的父div。

希望这有帮助！

*编辑：如果你想在图片和带填充的链接之间添加一个空格，只给你的图像像padding: 1em 0;这样的顶部/底部填充，然后像这样将父填充添加到父div中padding: 0 1em。

这是另一个Fiddle，并表示赞同。

Answer 3

这是你想要的吗？如果我能改进这个答案，请告诉我:)。

<div>
  <img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;">
  <a href="/link.php" style="display: block;background-color:blue; width:calc(100% - 10px); margin:auto;">WORDS</a>
</div>

Answer 4

我想你问这样的事情......

<div style="width:100%; max-width:400px;">
    <img src="http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" style="auto;text-align:center;display:block; max-width:400px; width:100%; padding:1em;border: 5px solid #EFEFEF;">
    <a href="link.php" style="display: inline-block; background: blue; width: 100%; padding:0em 1em;border: 5px solid blue;">WORDS</a>
</div>

好吧，你看，我已经玩了所有元素的宽度来实现它，并在“a”标签的边框填充上作弊。没有在你的图像和你的主要div上设置宽度，除非你使用javascript ...

，否则你无法实现你的要求

使链接具有与其上方图像相同的宽度

4 个答案: