Question

我正在尝试将不同的图像分配为链接，但是超链接似乎扩展到了页面的其余部分（水平）。

这是图像作为链接的样子，但是（如上所述）它们延伸到两侧，但顶部和底部都很好。 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;
}

预先感谢， e

Answer 1

H2是一个嵌段元素。

将其更改为内联（或内联块）：

.animemid h2 {
   display:inline;

链接延伸到整个页面（使用图像作为链接）

1 个答案: