HTML / CSS按钮链接不起作用

Question

我正试图在我使用CSS制作的这个按钮内放置一个链接到我网站的另一个页面。 但是，该按钮已经在其中设置了格式化文本，并且链接显然仅在我在<a></a>标记内使用文本时才有效。 任何想法如何让整个按钮成为可点击的链接？ 这是有问题的代码：

<nav>
<p class="button"><a href="pictures.htm"></a>Pictures of our destinations</p>
<p class="button">Prices for flights, hotels and all in one deals</p>
<p class="button">Today's deals</p>
<p class="button">Contact us!</p> 
<p class="button">Sign up for an account</p>
</nav>

该代码代表，链接不起作用，没有可点击的区域。 但是，将文本从<p>标记移动到<a>标记会使链接起作用，但我的CSS格式不适用于它。

Answer 1

你需要这样做

<a href="pictures.htm" class="button">Pictures of our destinations</a>

您需要将内容放在可点击a标记内

现在按下按钮

.button{    
/*.......

Your button style properties

.........*/        
}

Answer 2

<a href="pictures.htm" class="button">Pictures of our destinations</a>而不是第一段

Answer 3

您可以直接添加class="button" <a>标签的样式并删除<p>标签。

<a class="button" href="pictures.htm">Pictures of our destinations</a>

Answer 4

删除<p>标记将解决您的问题：

<a href="pictures.htm" class="button">Pictures of our destinations</a>

使用您自己的CSS类：

.button {
    border: none;
    background-color: #e7e7e7;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}