gpt4 book ai didi

html - 图片上的链接扩展了图片标签

转载 作者:行者123 更新时间:2023-11-27 23:18:55 26 4
gpt4 key购买 nike

我不明白为什么我的 href 链接会扩展我的图片。我在图片上设置了宽度和高度。 My Example Site .我在 stackoverflow 上环顾四周,我还尝试在 href 上设置高度和宽度。

我使用表格的原因是基于电子邮件的基础框架。

我的代码是这样的:

HTML

<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<!-- Logo Start -->
<table align="center" class="wrapper header float-center background-color__blue">
<tbody>
<tr>
<td class="wrapper-inner">
<table align="center" class="container" style="background-color:transparent">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th>
<a href="https://www.google.dk/"><img src="https://3.imimg.com/data3/HR/NW/MY-18669487/english-images-2-5-animal-care-20p-26s-250x250.jpg" alt="Some text" align="center" class="float-center" width="250" height="80"></a>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Logo End -->
</td>
</tr>
</table>
</body>

最佳答案

为了不让链接跳出图片的边界,你需要在a元素上设置display: inline-block;:

a {
display: inline-block;
}

请注意,这会扰乱图像对齐。为了解决这个问题,您还需要在 th 元素上设置 text-align:center:

th {
text-align: center;
}

您还在第 元素上设置了 line-height。如果您希望图像占据 th 高度的 100%,则需要删除它,或者将其设置为 0.7:

th {
line-height: 0.7;
}

希望这对您有所帮助!

关于html - 图片上的链接扩展了图片标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41969677/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com