下面的代码将文本“单击此处获取免费奖品”分成四行,如下所示:
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;
}发布于 2012-03-09 06:48:18
尝试:
.arizona a{ display:block; }然后丢掉填充物。
https://stackoverflow.com/questions/9626240
复制相似问题