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

您可以直接添加<a>标记class="button"标记并移除<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;
}

HTML / CSS按钮链接不起作用

4 个答案: