CSS：我如何将图标放在文本旁边？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

CSS：我如何将图标放在文本旁边？

P粉668146636 2023-08-17 14:39:36

[CSS3讨论组]

831

我有一个这样的父级div元素（display: flex），包含两个子元素 <ol> <li>文本 - 一个span元素</li> <li>(i) 图标 - 一个div元素</li> </ol> 当文本只有一行（不换行）时，一切正常。然而，当它换行（2行或更多）时，元素的宽度将根据最宽的一行进行调整 我希望文本在长度较长时能够换行。 在上面的示例中，我希望(i)图标位于NORTH旁边。 我希望(i)图标位于NORTH旁边。

P粉668146636

全部回复(1)

P粉1139388802023-08-18 00:42:54 1楼

如果您只想让图标始终位于单词“North”旁边，只需将其放在标签内：

.flex
{
  display:flex;
  align-items:center;
  resize: both;
  overflow:auto;
  background: #99AAAA;
  max-width: fit-content;
   max-height: fit-content;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<h3>拖动角落进行调整大小</h3> 
<div class="flex">
  <span>THE KING OF THE NORTH <i class="fa-solid fa-image"></i></span>
  </div>