html - 将其中包含文本的 100 x 100 像素正方形制作为超链接

Question

下面的代码将文本“单击此处获取免费奖品”分成四行，如下所示:

Click here 
for your 
free 
prize 

没关系，但我希望将此文本放在一个 100 像素 x 100 像素的正方形中，并在其周围有一个 2 像素的边框。下面的代码在链接的每一行上方和下方放置了一个 2 像素的边框。

我怎样才能使超链接成为一个 100 X 100 像素的大正方形且文本排列相同？

  echo "<div class='arizona'>";

                echo "<a href='http://www.stackoverflow.com/folder/folder/file.php?submission=".urlencode($submission)."&submissionid=".$submissionid."'>Click here for your free prize</a>";

                echo "</div>";

CSS:

    .arizona { 
                position: absolute;
                top: 790px;
                left: 650px;
                color: #004993;
                width:100px;
                font-family: Georgia, "Times New Roman", Times, serif;
                font-size: 12px;
                font-weight: normal;
                height: 100px;
                padding-bottom: 2px;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 2px;

    }

    .arizona a{ 
                margin-left:0px;
                margin-top:15px;
                color: #004284;
                width:100px;
                background-color: #FFFFFF;
                border:2px solid #004284;
                font-family:Georgia, "Times New Roman", Times, serif;
                font-size: 15px;
                font-weight: normal;
                height: 100px;
                padding-bottom: 2px;
                text-decoration:none;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 2px;

    }

    .arizona a:hover{ 
                margin-left:0px;
                margin-top:15px;
                width:100px;
                background-color: #CAE1FF;
                color: #004284;
                border:2px solid #004284;
                font-family:Georgia, "Times New Roman", Times, serif;
                font-size: 15px;
                font-weight: normal;
                height: 100px;
                padding-bottom: 2px;
                text-decoration:none;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 2px;

    }

Answer 1

尝试:

.arizona a{ display:block; }

并删除填充。