将 <button> 嵌套在 <a> 内

Question

我想嵌套一个按钮，该按钮执行<a>标记之间的 Ajax 操作。

整个容器应该作为一个单独网页的链接，而“收藏夹”按钮将执行一个不相关的 Ajax 操作。不幸的是，这是无法完成的，因为<button>不能嵌套在<a>标签中。

是否有一个简单的解决方法来实现这种效果？

当前代码：

<a class="button7" onmouseover="displayFavorite('000')" onmouseout="hideFavorite('000')" href='http://www.example.com">
    Math 141
    <button id='000' class="button8" onclick="favorite('000')">Favorite</button>
    <ul>
        <li><strong>Description</strong> Calculus 1 and Calulus 2</li>
        <li><strong>Instructor</strong> Boon Ong</li>
        <li><strong>Documents</strong> 17</li>
    </ul>
</a>

编辑：请注意，AJAX 只是附加信息，与问题无关。

Answer 1

像这样的东西：

<div class="container">
    <a class="button7" href="http://google.co.uk" onmouseover="displayFavorite('000')" onmouseout="hideFavorite('000')">
    Math 141

    <ul>
        <li><strong>Description</strong> Calculus 1 and Calulus 2</li>
        <li><strong>Instructor</strong> Boon Ong</li>
        <li><strong>Documents</strong> 17</li>
    </ul>
</a>
<button id='000' class="button8" onclick="favorite('000')">Favorite</button>
</div>

CSS：

.container {
    position:relative;
    width:400px;
}
.button7 {
    width:100%;
    height:auto;
    display:block;
    background:red;
}
.button8 {
    position:absolute;
    top:5px;
    right:5px;
}

在父容器绝对定位的元素position:relative;，您可以使用CSS属性top，left，right，和bottom相对于包围它的容器。

将<a>(with class .button7)设置为display:block;意味着超链接将充当块级元素并占据整个“块”（即其父级提供给它的空间）

http://jsfiddle.net/t29m4/