如何实现HTML按钮整体可点击 仅Cart文字可点击问题求助

问题原因 #

你当前的按钮视觉样式（背景、内边距、圆角）全部定义在外层span容器上，而可点击的<a>标签为默认行内元素，尺寸仅等于内部图标+文本的总宽高，外层容器的内边距区域不属于<a>的渲染范围，因此只有文本和图标区域可点击。 #

推荐方案：调整结构，将按钮样式绑定到可点击元素上 #

直接把外层span的样式类迁移到<a>标签，无需修改原有CSS参数，从根源解决问题，同时符合语义化规范：

<a href="/cart/" class="header-account-item header-account-item-cart">
    <i class="fas fa-shopping-cart fa-shopping-cart-icon fa-1x"></i>
    <span class="my-cart-text">Cart</span>
</a>

备选方案：不修改HTML，仅新增CSS扩展点击区域 #

如果无法调整HTML结构，新增以下CSS即可让<a>标签撑满外层容器：

.header-account-item-cart a {
    /* 让a标签可设置宽高并撑满父容器 */
    display: inline-block;
    width: 100%;
    height: 100%;
    /* 可选：移除默认链接下划线 */
    text-decoration: none;
}

极端场景兼容方案：JS辅助实现全区域点击 #

如果受业务限制既不能改HTML也不能调整核心CSS，可通过JS实现点击跳转，同时补充光标样式提示可点击：

/* 新增CSS */
.header-account-item-cart {
    cursor: pointer;
}

// 新增JS
document.querySelector('.header-account-item-cart').addEventListener('click', () => {
    window.location.href = '/cart/';
})

该方案不符合语义化规范，非必要不使用。 #

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