如何在flex-wrap布局中让按钮整体可点击而非仅文字区域？

完全可以仅通过HTML和CSS实现，且不会破坏原有的flex-wrap布局。核心思路是让内部的<a>标签铺满整个按钮容器，同时将交互效果绑定到容器上。以下是修改后的代码及说明：

修改后的HTML（保留原结构，无需大幅改动） #

<div class="flex-container wrap">
    <div class="action">
        <a href="action.html">Action Movies</a>
    </div>
    <div class="animated">
        <a href="animated.html">Animated Movies</a>
    </div>
    <div class="comedy">
        <a href="comedy.html">Comedy Movies</a>
    </div>
    <div class="Docu">
        <a href="documentary.html">Documentary Movies</a>
    </div>
    <div class="fantasy">
        <a href="fantasy.html">Fantasy Movies</a>
    </div>
    <div class="horror">
        <a href="horror.html">Horror Movies</a>
    </div>
    <div class="noir">
        <a href="noir.html">NOIR Movies</a>
    </div>
    <div class="scifi">
        <a href="scifi.html">Sci-Fi Movies</a>
    </div>
    <div class="thriller">
        <a href="thriller.html">Thriller Movies</a>
    </div>
    <div class="truecrime">
        <a href="truecrime.html">True Crime Movies</a>
    </div>
</div>

修改后的CSS #

.flex-container {
    display: flex;
    background-color: #C0A9BD;
    margin: -10px;
}

.flex-container > div {
    background-color: white;
    width: 90px;
    height: 50px;
    margin: 20px;
    padding: 15px;
    border: 2px solid black;
    border-radius: 15px;
    box-sizing: border-box; /* 让width包含padding和边框，布局更可控 */
    position: relative; /* 为内部a标签的绝对定位提供参考 */
}

.flex-container > div > a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
    font-size: 17px;
    border-radius: inherit; /* 继承父元素圆角，避免点击区域与视觉容器不一致 */
}

.flex-container > div:hover {
    background-color: #C0A9BD; /* 鼠标悬停时容器背景色变化 */
}

.flex-container > div:hover a {
    color: black; /* 悬停时文字颜色变化 */
}

.wrap { flex-wrap: wrap; }

关键修改说明 #

1. 让a标签铺满容器：通过绝对定位将<a>标签拉伸至完全覆盖父容器，确保点击容器任意位置都能触发链接跳转。同时用flex布局实现文字居中，替代原有的text-align和line-height，适配性更强。
2. 绑定hover到容器：将hover效果直接绑定到外层div，而非内部a标签，确保鼠标移到容器任意区域都能触发样式变化。
3. 保留flex-wrap布局：原有的.flex-container和.wrap类完全保留，flex-wrap的换行逻辑不受任何影响。
4. 布局稳定性优化：添加box-sizing: border-box让容器的width包含padding和边框，避免元素尺寸超出预期。

内容的提问来源于stack exchange，提问作者Darth Coursucant