html - 整个按钮不可点击

Question

正如您在尝试单击按钮而不是“更多”时在 JSFiddle 中看到的那样，链接不起作用。

http://jsfiddle.net/CM5e8/

文案

button {
padding: 8px 20px;
border: 0;
@include border-radius(6px);
font-size: 0.8em;
text-transform: uppercase;
float: right;
cursor: pointer;
display: block;


a {
    display: block;
    color: white;
    text-decoration: none;
}
}

.green {
background: #9fd468;
display: block;

&:hover {
    background: #ace175;
}

&:active {
    @include box-shadow (inset 2px 2px 1px #759f49);
}
}

html

<button class="green">
    <a href="<?php the_permalink(); ?>">More</a>
</button>

Answer 1

标签只在按钮中的<a>文本周围，因此为了使整个按钮可点击，您需要将<a>标签包裹在按钮周围。这是代码：

<a href="<?php the_permalink(); ?>">
    <button class="green">More</button>
</a>

Answer 2

将按钮包裹在锚标记中，使按钮成为链接。

<a href="<?php the_permalink(); ?>">
    <button class="green">More</button>
</a>