嵌套 div 以在电话周围制作按钮：链接？答案

【问题标题】：Nesting Div To Make Button Around Tel: Link?嵌套 div 以在电话周围制作按钮：链接？
【发布时间】：2014-12-17 08:56:30
【问题描述】：

我试图在关闭标签之前嵌套一个 div，以便在水龙头周围制作一个按钮以调用 tel:link:

                                        <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 容器）它可以工作，但只是一个未修饰的链接.

有什么办法吗？

谢谢。

【问题讨论】：

请发布您的 CSS。
您不能将块元素包含在行内元素中。在标签内创建链接

标签： html css nested tel

【解决方案1】：

正如 dfionov 正确指出的那样，您不能在内联元素中包含块元素。然而，锚点 (<a>) 是 HTML5 规则的一个例外，如 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>

【讨论】：

【解决方案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>

【讨论】：