html - 如何在图标旁边显示 h4

Question

我使用了很棒的字体，当我尝试显示一个图标后跟一个 h4 时，h4 会进入下一行并且不会停留在图标的右侧。

这是我的代码：<div><i class="fa fa-mobile fa-3x"></i><h4>Telephone</h4></div>

如何使h4不会出现在下面的行中？

标签： htmlcsstwitter-bootstrapiconsfont-awesome

Answer 1

只需添加display:inline;如下h4所示

display: block意味着元素显示为一个块，就像段落和标题一样。一个块的上下都有一些空格，并且它旁边不允许有任何 HTML 元素，除非有其他命令（例如，通过向另一个元素添加浮点声明）。

display: inline表示元素内联显示，在当前块内的同一行。只有当它在两个块之间时，元素才会形成一个“匿名块”，但是它具有最小的可能宽度。

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>



<div><i class="fa fa-mobile fa-3x"></i><h4 style="display:inline;">Telephone</h4></div>