0

我有一个像这样工作的按钮类：

<p class="button"><a href="#">Rejoindre</a></p>

CSS是：

p.button
{
    background-color: #e74c3c;
    line-height: 30px;
    width: 200px;
    text-align: center;
}

.button a
{
    font-family: Montserrat, sans-serif;
    color: white;
    font-size: 0.9em;
    text-transform: uppercase;
}

.button a:hover
{
    text-decoration: none;
}

如何使整个按钮（由段落标记表示）成为链接而不仅仅是文本？

4

4 回答 4

5

您可以将链接标签放在外部，以使其内部的任何内容都包含在链接中：

<a href="#"><p class="button">Rejoindre</p></a>

p但是，您可能想为按钮使用标签以外的东西，也许是一个button元素？

有关 HTML 按钮的更多信息。

于 2013-07-08T20:46:38.687 回答
1

添加display: block到.button a规则集。

http://jsfiddle.net/ExplosionPIlls/UvrKx/

于 2013-07-08T20:46:52.253 回答
1

您可以添加display:block;到您的锚标记。

display: block 意味着元素显示为一个块，就像段落和标题一样。一个块的上下都有一些空格，并且它旁边不允许有任何 HTML 元素，除非有其他命令（例如，通过向另一个元素添加浮点声明）。

小提琴：http: //jsfiddle.net/akx3p/

CSS：

p.button
{
    background-color: #e74c3c;
    line-height: 30px;
    width: 200px;
    text-align: center;

}

.button a
{
    font-family: Montserrat, sans-serif;
    color: white;
    font-size: 0.9em;
    text-transform: uppercase;
    display: block;
}

.button a:hover
{
    text-decoration: none;}
于 2013-07-08T20:47:31.490 回答
1

<p>是块元素，这意味着它们自然是在100%宽度上。如果您只是添加display: block;到锚标记，则可以使其行为方式相同。这是一个小提琴 。这样，您就可以p一起摆脱标签。

于 2013-07-08T20:48:44.027 回答