Question

我正在尝试将链接设置为按钮。我的代码有两个问题：

1）边距不起作用，因此按钮重叠。 2）按钮宽度取决于链接文本。宽度值似乎被忽略了。

我的方法是否有问题，或者我可以做一些小改动以使其有效？

<div class='button1'>
   <a rel="nofollow" href='www.google.com' target='_blank'>Option 1</a>
   <br>
   <a rel="nofollow" href='www.google.com' target='_blank'>Option 111111</a>
</div>

CSS：

.button1
{

text-align: center;
font-size: 16px;
font-weight: bold;

}

.button1 a
{
width: 20px;
margin: 40px;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #7ca500;
border-radius: 5px;
border: solid #cccccc 3px;
}

.button1 a:hover
{
color: #fff;
background-color: #86b200;
}

Answer 1

我认为关键是使用DIV使其看起来像一个按钮：

HTML：

<div class='button1'>
  <a rel="nofollow" href='www.google.com' target='_blank'>Option 1</a>
</div>
<div class='button1'>
  <a rel="nofollow" href='www.google.com' target='_blank'>Option 2</a>
</div>

CSS：

.button1 {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    width:100px;
    display: inline-block;
    color: #fff;
    background-color: #7ca500;
    border-radius: 5px;
    border: solid #cccccc 3px;
    padding: .6em;
    cursor: pointer;
    margin: 20px;
}

.button1:hover
{
  background-color: #86b200;
}

.button1:active
{
  background-color: red;
}

.button1 a
{
    color: #fff;
    text-decoration: none;
}

Answer 2

如果您将display: block;或display: inline-block;添加到锚标记，则您的边距和宽度值将按预期工作。默认情况下，<a>元素为display: inline;

Example

Answer 3

您还可以查看 jsfiddle
我使用<div class="button1"> 2次，每按一次。

如何将链接设置为按钮？

3 个答案: