为什么图标和文字排在同一行？

2024-05-14 • 问答

当我显示一个图标和一些文本时，我希望它们位于同一行。使用<div>标签可以实现此目的。但是，当我使用<p>标记时却无法实现。为什么这样？

.container {
  display: flex;
}
i {
  color: black;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <i class="material-icons">call</i>
  <!-- <div>9988998899</div> -->
  <p>9988998899</p>
</div>

默认情况下，p标记具有一个margin值，您需要重置该值或设置align-items属性。同样使用div标签，您会注意到元素是根据它们的顶部边框（不成一直线）对齐的，这可以通过align-items实现：

.container {
  display: flex;
  outline: 1px solid orange;
}

.c1 p {
  margin: 0;
}

.c2,.c4 {
  align-items: center;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<pre>// p with margin: 0</pre>
<div class="container c1">
  <i class="material-icons">call</i>
  <p>9988998899</p>
</div>

<pre>// p without margin: 0,but align-items:center</pre>
<div class="container c2">
  <i class="material-icons">call</i>
  <p>9988998899</p>
</div>

<pre>// div without align-items:center</pre>
<div class="container c3">
  <i class="material-icons">call</i>
  <div>9988998899</div>
</div>

<pre>// div with align-items:center</pre>
<div class="container c4">
  <i class="material-icons">call</i>
  <div>9988998899</div>
</div>

为什么图标和文字排在同一行？

c17789642 回答：为什么图标和文字排在同一行？

大家都在问