如何對齊文本並將按鈕放在灰色條的最右側？

Question

我怎樣才能在我的灰色欄中顯示我的 Invitee2 有點高？ 對於我的按鈕，我怎樣才能將它放在灰色條的最右側？

<div className="bg-gray-200 p-5 h-5 pl-2 mb-2 text-md text-primary-500  font-bold  text-gray-500">
Invitee {i + 1}
<span className="float-right -mt-5">
    {!!i && (
        <Button primary className="rounded-md float-right mt-4" onClick={() => removeInvitee(pId)}>
            - Invitee
        </Button>
    )}
</span>

和Button.jsx ：

export default function Button({ onClick,primary,children,disabled }) {
    return <button
        onClick={onClick}
        className={`${primary
            ? ' cursor-pointer rounded-md bg-primary-700 py-2 px-3  text-white  hover:bg-blue-700 hover:text-white'
            : 'bg-transparent  text-gray border border-primary-500 hover:border-primary-100 hover:text-primary-100 transition duration-200 '} 
            text-primary-fg py-2 px-3 rounded-md transition-colors `}
        disabled={disabled}
    >{children}</button>
}

這是一張圖片來了解這個想法：

Answer 1

在div類中添加flex flex-row justify-between items-center

並刪除float-right旁邊的span類中的-mt-5

檢查下面的代碼

<div className="flex flex-row justify-between items-center bg-gray-200 p-5 h-5 pl-2 mb-2 text-md text-primary-500  font-bold  text-gray-500">
Invitee {i + 1}
  <span className="float-right">
      {!!i && (
          <Button primary className="rounded-md float-right mt-4" onClick={() => removeInvitee(pId)}>
              - Invitee
          </Button>
      )}
  </span>
</div>

Answer 2

您可以使用 flexbox 屬性來制作您想要的設計。 我在下面創建了非常相似的示例，請在此處添加您的函數並將class替換為className 。

 <script src="https://cdn.tailwindcss.com"></script> <div class="container mx-auto py-4"> <div class="bg-gray-200 text-md flex items-center justify-between rounded-r-md"> <div class=" font-bold text-gray-500 ml-4" >Invitee 2</div> <div class=""> <Button primary class="rounded-md bg-black text-white py-2 px-4" onclick="removeInvitee(pId)"> - Invitee </Button> </div> </div> </div>