如何将文本移动到与 Tailwind 中的按钮相同的行 CSS

Question

我是 Tailwind 的初学者 CSS。如何将文本 Sovereignty Music 移动到顶部 关闭图标 所在的同一行。我想要 Tailwind CSS 中的答案。下面的代码 .

<div className="w-72 bg-white text-gray-100 shadow-lg">
  <div className="p-7 text-sm h-full flex flex-col">
    <button className="text-slate-800 self-end hover:text-white hover:bg-black rounded-full p-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
      <SwitchHorizontalIcon className="h-5 w-5" />
    </button>
    <a className="flex space-x-5 p-5 text-slate-800">
      <MusicNoteIcon className="h-5 w-5" />
      <p className="font-semibold">Sovereignty Kingdom</p>
    </a>
    <nav className="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white my-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
      <HomeIcon className="h-5 w-5" />
      <p>Home</p>
    </nav>
    <nav className="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white my-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
      <TrendingUpIcon className="h-5 w-5" />
      <p>Trends</p>
    </nav>
  </div>
</div>

Answer 1

您需要将 button 和 a 标签都包裹在 div 中，并给它 flex 和 justify-between 类

你想让它看起来像这样对吗？:

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

<div class="w-72 bg-white text-gray-100 shadow-lg">
  
  <div class="p-7 text-sm h-full flex flex-col">
    <div class="flex  justify-between">
      <a class="flex  py-5 text-slate-800">
      <MusicNoteIcon class="h-5 w-5" />
      <p class="font-semibold">
        Sovereignty Kingdom
      </p>
    </a>
      <button class='text-slate-800 bg-red-500 self-center hover:text-white hover:bg-black rounded-full p-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer'>
        icon
      </button>           
    
    </div>
    <nav class="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white my-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
      <HomeIcon class="h-5 w-5" />
      <p>Home</p>
    </nav>
    <nav class="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white my-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
      <TrendingUpIcon class="h-5 w-5" />
      <p>Trends</p>
    </nav>
  </div>
</div>

如何将文本移动到与 Tailwind 中的按钮相同的行 CSS

How to move text to the same line as a button in Tailwind CSS

position

tailwind-css