html - 嵌套 Div 使按钮围绕电话 : Link?

Question

我试图在关闭我的标签之前嵌套一个 div，以便在水龙头周围制作一个按钮来调用电话:链接:

                                        <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 正确指出的那样，您不能在内联元素中包含 block 元素。然而， anchor ( <a> ) 是 HTML5 规则的一个异常(exception)，如 explained in another answer .

我还想提一下，对于您的用例，应避免使用表格。它们用于显示不对齐图像的表格数据。

有很多方法可以用 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>