我试图将不同的图像分配为链接，但超链接似乎扩展到页面的其余部分(水平)。
这就是图像作为链接的样子，但是(如上所述)它们延伸到两侧，但在顶部和底部都很好。 https://imgur.com/a/kZi0Llk
我该如何防止这种情况发生？
HTML:
<body>
<ul id="navbar">
<li><a href="index.html">Home</a></li>
<li><a class="active" href="anime.html">Anime</a></li>
<li><a href="form.html">Whats your opinion?</a></li>
</ul>
<div class="animemid">
<!-- Black Clover -->
<div class="bc">
<a class="link" href="blackclover.html">
<img style="vertical-align:middle" id="bcImg" src="assets/blackclover.jpg" width="400" height="225">
<h2 id="bcTag">Black Clover</h2>
</a>
</div>
<!-- My Hero Academia -->
<div class="mha">
<a class="link" href="myheroacademia.html">
<img style="vertical-align:middle" id="mhaImg" src="assets/deku.png" width="400" height="225">
<h2 id="mhaTag">My Hero Academia</h2>
</a>
</div>
<!-- Haikyuu!! -->
<div class="hky">
<a class="link" href="haikyuu.html">
<img style="vertical-align:middle" id="hkyImg" src="assets/haikyuuPage.jpg" width="400" height="225">
<h2 id="hkyTag">Haikyuu!!</h2>
</a>
</div>
</div>
</body>
CSS:
.animemid {
margin-top: 69.5px;
}
.animemid h2 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: white;
text-decoration: none;
text-align: center;
}
.animemid img {
display: block;
padding: 5px;
border: 1px solid white;
opacity: 0.75;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.animemid div {
position: relative;
}
提前致谢， 电子
最佳答案
H2 是 block 元素。
将其更改为内联(或内联 block ):
.animemid h2 {
display:inline;
关于html - 链接横跨整个页面(使用图片作为链接)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53731180/