Javascript 一行输入文本并提交

如何将我的提交按钮与inputtext一起传递到一行，提交将位于inputtext的右侧

我的代码：

<div class="mt-12">
             <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 w-full 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>

您可以使用

诸如此类：

按钮

实现这一点有多种方法。 单独的HTML（没有CSS）将被呈现为一行，因为输入是一个内联块标记，锚是一个内联标记。但是，CSS中的某些内容可能正在更改两个元素的显示属性之一

我们可以尝试使用父元素中的flex来覆盖这种行为

mt-12 {
   display: flex;
   align-items: center; // only to make sure they look nice and centered
}

或者只需确保两个元素的“显示”属性均为“显示”：

input, a {
  display: inline-block; // or inline, depending on your needs
}

---

请注意，似乎您正在使用帮助器类，某些帮助器类（例如Boostrap帮助器类）的属性可能设置为！因此很难覆盖重要标志。在这种情况下，最好删除那些不需要的助手类。您还可以通过设置！你的类中也有一个重要的标志，并且具有更高的CSS特异性-但这是一个糟糕的方法。

如果你想留在Boostrap世界，这个答案比我的通用方法要好