如何实现Submit按钮与InputText在同一行显示且位于InputText右侧？

嘿，我来帮你搞定这个布局需求！你的问题出在输入框用了w-full，会占满容器的整个宽度，导致按钮被挤到下一行。用Tailwind的Flex布局就能轻松解决，看下面的修改方案：

修改后的完整代码 #

<div class="mt-12 flex items-center">
  <input 
    id="grid-text" 
    type="text" 
    class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline flex-grow mr-2 ease-linear transition-all duration-150" 
    placeholder="email" 
  />
  <a 
    href="#" 
    class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-500 active:bg-red-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
  >
    Run!
  </a>
</div>

关键改动说明： #

• 给外层div添加flex items-center：
  • flex：开启弹性布局，让内部的输入框和按钮默认横向排列；
  • items-center：让两个元素垂直居中对齐，视觉上更协调。
• 把输入框的w-full替换成flex-grow：让输入框自动填充容器的剩余空间，而不是强制占满整个宽度，这样按钮就能留在同一行。
• 给输入框加mr-2：在输入框和按钮之间添加一点水平间距，避免元素挤在一起，提升美观度。

这样调整后，输入框和按钮就会完美地在同一行显示，按钮位于输入框右侧，而且布局会自适应容器宽度，在小屏幕上也能有不错的表现~

内容的提问来源于stack exchange，提问作者svelteDev