Question

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

<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;
}

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

Answer 1

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

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

但是，您可能希望为按钮使用p标记以外的内容，而不是button元素？

More info on HTML buttons

Answer 2

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

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

Answer 3

您可以将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;}

Answer 4

<p>是块元素，意味着它们自然处于100%宽度。如果您刚刚将display: block;添加到锚标记，则可以使其行为方式相同。 Here's a fiddle 。这样，您就可以一起删除p标记。

建立一个链接使用所有空间

4 个答案: