如何将图标和p标签对齐在同一行（materializecss）

Question

我正在使用物化 css 和材质图标，试图在图标旁边放几个数字，但我不知道该怎么做。 代码如下：

<i class="material-icons">person</i>
<p>123123</p>

如果有人能帮忙就太好了！

Answer 1

将您的代码替换为以下内容：

<p><i class="material-icons">person</i>123123</p>

Answer 2

您只需将“float:left”样式属性添加到您的图标标签。试试下面的代码。

  <i class="material-icons" style="float:left">person</i>
  <p>123123</p>

Answer 3

我不太了解你，但我假设你想把数字和图标放在一起，所以你必须把它们放在一个 div 标签中，然后像这样设置 div 的样式：

<div style="display:flex;">
   <i class="material-icons">person</i>
   <p>123123</p>
</div>

浏览器可能会在 <p> 上应用一些样式，例如边距，因此如果需要，您可以将 margin:0 设置为 <p>。

获得相同结果的另一种方法是将<p> 和<i> 的显示属性设置为"inline-block"

Answer 4

显示属性

Display 属性主要负责确定如何布局您的元素。

显示块

例如，旧的 div 默认具有 block 的显示属性。这意味着它将填满整个可用宽度，并且之后的每个元素都会在 新行 上呈现。如果您考虑一下 block 这个词，这也是有道理的。

<div>Div's display defaults to block</div>
<div>Div's display defaults to block</div>

内嵌显示

现在另一个著名的标签是span，它有一个显示属性inline。这不会中断新行。如果我们考虑一下这个词本身内联

，这也是有道理的。

<span>span's display defaults to inline</span>
<span>span's display defaults to inline</span>

你看，我们有一种非常基本的方式来表达我想要垂直布局或者我想要水平布局。

其他方法

多年来，对更复杂的布局方式的需求不断增加。过去人们会使用 float ，但这有很多缺点。如今，我们的 CSS 工具箱中有两个强大的工具。 Flexbox 和 CSS 网格。

使用 flex box 时，您可以想到一个可用于布置元素的单轴，而 CSS 网格提供了一个可以使用的真正 2d 空间。我把它留给读者去探索更多。

Answer 5

要以物化方式做到这一点，只需在图标上添加一个左类：

<i class="material-icons left">person</i>
<p>123123</p>

按钮的文档对此提供了一些启示——这是我们传统上在框架中并排看到文本和图标的地方。

https://materializecss.com/buttons.html

<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>

@927tanmay 的回答在技术上是正确的——左类只是将 float:left 添加到元素中——但没有必要编写内联或额外的 css，因为左类是文档的一部分，旨在与图标一起使用。

在helpers 部分查看更多信息。