如何在图标旁边显示 h4答案

【问题标题】：How display h4 next to icon如何在图标旁边显示 h4
【发布时间】：2021-04-17 06:41:09
【问题描述】：

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

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

如何让h4不出现在下一行？

【问题讨论】：

除了以下答案之外，您应该知道h4 作为所有其他标题的默认显示为block，这意味着它们占据了可用宽度的 100%，因此要换行。有多种方法可以做你想做的事，你只需要一点研究。

标签： html css twitter-bootstrap icons font-awesome

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

【讨论】：

稍微解释一下为什么这样可以帮助用户，因为看起来他是 css/html 的初学者
它的工作原理，因为我把它 display:inline; 基本上 h4 默认 display:block; 包含全宽...
我的意思是在您的答案中进行解释。内联元素和块元素之间的区别/定义。

【解决方案2】：

你可以像这样添加一个浮点数：

<style>
  .title-icon{
        float: left
   }
</style> 

<div>
    <i class="fa fa-mobile fa-3x title-icon"></i>
    <h4>Telephone</h4>
</div>

【讨论】：

请不要推荐在这种情况下使用float。浮动不是用于布局目的。您最终可能会得到不需要的结果。 Float 主要用于您拥有图像并且希望文本环绕它的场景。有更好的选择，例如 flexbox 或 css grid

【解决方案3】：

您可以为此使用display : flex;。

我强烈建议您学习 flex 或 css-grid 以使用 CSS 在页面上移动元素。

Flex 有很多属性，但同样，您应该认真研究一下！

这是您的解决方案：

div {

    display : flex;
    align-items : center;

}

【讨论】：