在 Tailwind CSS 上使用侧边按钮输入

Posted 2023-03-06

技术标签:

【中文标题】在 Tailwind CSS 上使用侧边按钮输入【英文标题】：Input with side button on Tailwind CSS 【发布时间】：2022-01-20 15:29:10 【问题描述】：

我想做这样的事情：但是当我在我的代码中尝试某些东西时，只需显示：这是我的代码：

<div class="lg:grid justify-center mt-4 flex">
    <BreezeInput2
        id="email"
        type="email"
        class="mt-1 block w-full focus:shadow-md"
        required
        autofocus
        autocomplete="username"
        placeholder="email@email.com"
      />
    <a class="rounded-md py-2 px-6 cursor-pointer tracking-wider text-md inline-table w-full
              items-center
              text-center bg-purple-600 text-white font-bold hover:bg-purple-600 hover:shadow-purple mt-3
            "
            :href="route('dashboard')"
          >
            Notify
    </a>
</div>

【问题讨论】：

【参考方案1】：

我可能会先从容器中删除 grid 样式，因为您已经有一个 flexbox，然后添加 flex-row。之后，从您的锚标记中删除您的 inline-table 实用程序，并添加一个 flex 实用程序。这应该会让你走上正轨！

如果您需要任何其他帮助，请告诉我或在这里提出。 https://play.tailwindcss.com/

【讨论】：

【参考方案2】：

将此行 <div class="lg:grid mt-4 flex"> 更改为 <div class="justify-center mt-4 flex"> 因为您已经应用了 flex 类。

https://play.tailwindcss.com/XrWzizHo7d

【讨论】：

以上是关于在 Tailwind CSS 上使用侧边按钮输入的主要内容，如果未能解决你的问题，请参考以下文章

Tailwind 如何修复侧边栏？

使用 css 或 tailwind 更改按钮的颜色