嵌套Div使电话周围的按钮：链接？

Question

我试图在关闭标签之前嵌套一个div，以使点击周围的按钮可以调用tel：链接：

                                        <a href=”tel:+18888888888">
                                            <div>
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td rowspan="2"><img id="phone" src="/phoneimg.png" alt="xx"></td>
                                                            <td rowspan="2">Tap To Call NOW!&#9;888.888.8888</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </a>

当我将html文件上传到主机时，点击按钮会收到404错误。

当我删除div时，并且关闭标签位于a href =“ tel：+18888888888”标签的后面（即，它具有正确的语法，在关闭标签之前没有div容器），它可以工作，但只是一个未经修饰的链接。

有什么办法吗？

谢谢。

Answer 1

正如dfionov正确指出的那样，您不能在内联元素中包含块元素。 但是，锚点（ <a> ）是HTML5中规则的例外，如另一个答案所述 。

我还要提及的是，对于您的用例，应避免使用表。 它们用于显示表格数据而不对齐图像。

使用CSS可以有多种方法，我可能会建议使用inline-block因为它可在所有现代浏览器上使用，并且比许多替代方法更易于理解。

<a href="tel:+18888888888">
    <img id="phone" src="/phoneimg.png" alt="xx">
    <span>Tap To Call NOW!&#9;888.888.8888</span>
</a>

Answer 2

更正的代码：

<div>
    <table>
        <tbody>
            <tr>
                <td rowspan="2"><a href="tel:+18888888888"><img id="phone" src="/phoneimg.png" alt="xx"></a></td>
                <td rowspan="2"><a href="tel:+18888888888">Tap To Call NOW!&#9;888.888.8888</a></td>
            </tr>
        </tbody>
    </table>
</div>