使用标签 <p> Tailwind CSS 图标化不在同一行答案

【问题标题】：Iconify not same line with tag <p> Tailwind CSS使用标签 <p> Tailwind CSS 图标化不在同一行
【发布时间】：2023-02-02 22:44:34
【问题描述】：

      <div class="relative p-8 top-20">
        <Icon
          icon="material-symbols:format-quote-outline"
          color="#97A3B6"
          width="35"
          height="35"
          :rotate="2"
        />
      </div>
      <p class="text-2xl pl-24 pt-10 text-slate-400 p-10">
        Find job here
      </p>
      <Icon
        icon="material-symbols:format-quote-outline"
        color="#97A3B6"
        width="35"
        height="35"
      />

enter image description here

我是 iconify 的输入标签，但它有更多的空间，就像这样 enter image description here

我想在“这里”一词后图标化

太感谢了

【问题讨论】：

标签： frontend tailwind-css

【解决方案1】：

如果您只想在此处的单词后加上引号，flex 类将解决您的问题。

<script src="https://cdn.tailwindcss.com"></script>

<div class="relative top-20 flex p-8">
  <svg class="h-8 w-8" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21.301 4c.411 0 .699.313.699.663 0 .248-.145.515-.497.702-1.788.948-3.858 4.226-3.858 6.248 3.016-.092 4.326 2.582 4.326 4.258 0 2.007-1.738 4.129-4.308 4.129-3.24 0-4.83-2.547-4.83-5.307 0-5.98 6.834-10.693 8.468-10.693zm-10.833 0c.41 0 .699.313.699.663 0 .248-.145.515-.497.702-1.788.948-3.858 4.226-3.858 6.248 3.016-.092 4.326 2.582 4.326 4.258 0 2.007-1.739 4.129-4.308 4.129-3.241 0-4.83-2.547-4.83-5.307 0-5.98 6.833-10.693 8.468-10.693z" fill-rule="nonzero" /></svg>

  <p class="p-10 pl-24 pt-10 text-2xl text-slate-400">Find job here</p>
  
  <svg class="h-8 w-8" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.699 20c-.411 0-.699-.312-.699-.662 0-.249.145-.516.497-.703 1.788-.947 3.858-4.226 3.858-6.248-3.016.092-4.326-2.582-4.326-4.258 0-2.006 1.738-4.129 4.308-4.129 3.241 0 4.83 2.547 4.83 5.307 0 5.981-6.834 10.693-8.468 10.693zm10.833 0c-.41 0-.699-.312-.699-.662 0-.249.145-.516.497-.703 1.788-.947 3.858-4.226 3.858-6.248-3.015.092-4.326-2.582-4.326-4.258 0-2.006 1.739-4.129 4.308-4.129 3.241 0 4.83 2.547 4.83 5.307 0 5.981-6.833 10.693-8.468 10.693z" fill-rule="nonzero" /></svg>
</div>

【讨论】：