Question

这是我的CSS

   button {
    border: 0 none;
    cursor: pointer;
    padding: 0 15px 0 0;
    text-align: center;
    height: 30px;
    line-height: 30px;
    width: auto;
}
button a {
    color:white;
    text-decoration:none;
}

button.rounded {
    background: transparent url(/images/button/btn_right.png) no-repeat scroll right top;
    clear: left;
    font-size: 0.8em;
}

button span {
    display: block;
    padding: 0 0 0 15px;
    position: relative;
    white-space: nowrap;
    height: 30px;
    line-height: 30px;
}

button.rounded span {
    background: transparent url(/images/button/btn_left.png) no-repeat scroll left top;
    color: #FFFFFF;
}

button.rounded:hover {
    background-position: 100% -30px;
}

button.rounded:hover span {
    background-position: 0% -30px;
}

button::-moz-focus-inner {
border: none;
}

以下是我的“按钮”的代码，其中包含一个链接。

<button class="rounded"><span><a href="profile.php">Profile</a></span></button>

问题是当我点击它时它没有链接到href。谁知道为什么？

Answer 1

顺便说一下，这不是CSS问题。这是一个“我不懂按钮”的问题：

http://www.w3schools.com/tags/tag_button.asp

按钮可以有“提交”，“按钮”或“重置”操作。如果您使用“按钮”操作，则应在OnClick事件中提供必要的javascript以导航到相关页面。

Answer 2

我相信按钮需要一个类型和值属性。

http://www.w3schools.com/tags/tag_button.asp

您还可以添加onclick，如：

<button onclick="location.href='/profile.php';">Profile</button>

但是，由于它只是一个常规链接，因此您可以更轻松地使用<a>标记并使用CSS设置样式。

为什么这个CSS按钮会混淆<a> tags?</a>

2 个答案: