html - 如何扩展 anchor 元素可点击半径以填充包含的div？

Question

<div class="social facebook">
        <a class="nostyle" href ="www.facebook.com">
            <i class="fa fa-facebook fa-2x"></i>    
        </a>
    </div>

给出上面的代码，我想知道如何扩展我的 anchor 标签的“可点击区域”。

问题如下:我已成功重定向到 Facebook 页面，但我只能点击图标本身(我的有效可点击区域是图标本身)，我想更改它，以便在我点击任何地方时我也会被重定向的圈子。

我的 CSS 是这样的:

.social{
text-align:center;
width:60px;
height:60px;
float:left;
background:rgb(255,255,255);
border:1px solid rgb(204,204,204);
box-shadow:0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
border-radius:100px;
margin:0 10px 10px 0;
padding:12px;

Answer 1

我会将链接环绕在圆形 DIV 周围:

    <a class="nostyle" href ="www.facebook.com">
      <div class="social facebook">
        <i class="fa fa-facebook fa-2x"></i>    
       </div>
    </a>