首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >将带有文本的100 x 100像素正方形设置为超链接

问将带有文本的100 x 100像素正方形设置为超链接
EN

Stack Overflow用户
提问于 2012-03-09 06:46:43
回答 1查看 245关注 0票数 0

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

代码语言:javascript
复制
Click here 
for your 
free 
prize 

这很好,但我希望这个文本是一个100像素x 100像素的正方形,周围有2个像素的边框。下面的代码在链接的每一行上面和下面都放了一个2像素的边框。

如何在文本排列相同的情况下使超链接成为100 x 100像素的大正方形?

代码语言:javascript
复制
  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:

代码语言:javascript
复制
    .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;

    }
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-03-09 06:48:18

尝试:

代码语言:javascript
复制
.arizona a{ display:block; }

然后丢掉填充物。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9626240

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档