使整个 html 按钮可点击

Question

出于某种原因，只有 'Cart' 文本可单击以下按钮。我尝试了几种不同的变体，但我似乎无法使整个按钮可点击。感谢您的任何建议。

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

这是与按钮关联的 css：

.header-account-item-cart {
margin-right: 5px;
}
.header-account-item {
background-color: #00a4ff !important;
padding: 8px;
border-radius: 3px;
display: inline-block;
margin-top: 25px;
margin-right: 10px;
}
.fa-shopping-cart-icon {
color: #FFFFFF;
padding-left: 0px;
}
.fa, .fab, .fad, .fal, .far, .fas {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}

Answer 1

只需将您的 <span> class 转移到您的 <a> 标签。

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

使整个 html 按钮可点击

make entire html button clickable

html

css

button