html - 将图像和链接视为一个元素

Question

我正在制作一个响应式网站。在底部，我有一个电话图标、一个电话号码、一个邮件图标和一个邮件地址——所有这些都在一行中。

<img src="https://cdn.pixabay.com/photo/2013/07/13/10/30/icon-157358_960_720.png" height="150px" width="111px">
<a href="tel:123456">123456</a>
<img src="https://cdn.pixabay.com/photo/2016/06/13/17/30/mail-1454734_960_720.png" height="150px" width="150px">
<a href="mailto:[e-mail]">[e-mail]</a>

在全窗口中，它看起来像这样：
[phone img][phone number] [mail img][mail address]

当我调整窗口大小时，它们最终会变成这样：
[phone img][phone number][mail img]
[mail address]

我希望图标和文本粘在一起，像这样：
[phone img][phone number]
[mail img][mail address]

我尝试用 div 和 span 将它们封装起来，但没有一个奏效。我还用谷歌搜索了“html 两个元素粘在一起”，但没有结果。

感觉真的很基础，我觉得很愚蠢，但我想不通。

标签： htmlresponsive

Answer 1

这个怎么样：

<a href="tel:123456">
    <img src="phone.jpg">123456
</a>

<a href="mailto:[e-mail]">
    <img src="mail.jpg">[e-mail]</a>

使用 css 添加填充和响应行为