使表单与CSS内联

.inline {
  display:inline;
}

<form action="https://google.com/search" class="inline">
  <div style="display: inline;">
    <input id="google" type="text" name="q">
    <input class="button" type="submit" value="Google Search">
  </div>
</form>
<form action="https://www.google.com/doodles/"  class="inline">
  <input class="button" type="submit" value="I'm so lucky">
</form>

另一个选项是你可以使用表单ID和目标表单，并将按钮放在另一个表单中。

<form action="https://google.com/search">
  <input id="google" type="text" name="q">
  <input class="button" type="submit" value="Google Search">
  <input class="button" form="lucky" type="submit" value="I'm so lucky">
</form>
<form action="https://www.example.com" id="lucky"></form>

表单默认为block元素，您需要使这两个inline元素位于同一行。
或者，将它们 Package 在flex容器中。

你把你的表单放在一个<div></div>和你的CSS上，在display: flex上经过你的div。之后，我在第二个按钮上给予了一个margin-left，以获得按钮之间的空间。

.flex {
  display: flex;
}

.ml-4 {
  margin-left: 4px;  
}

<div class="flex">
  <form action="https://google.com/search">
    <div style="display: inline;">
      <input id="google" type="text" name="q">
      <input class="button" type="submit" value="Google Search">
    </div>
  </form>
  <form action="https://www.google.com/doodles/">
    <input class="button ml-4" type="submit" value="I'm so lucky">
  </form>
</div>

学习flexbox，现在，这真的很重要！：）
祝你愉快。

你可以用伸缩盒来解决你的问题

<div style="display: flex; justify-content: center; align-items: center;">
  <form action="https://google.com/search">
    <div style="display: inline;">
      <input id="google" type="text" name="q">
      <input class="button" type="submit" value="Google Search">
    </div>
  </form>
  <form action="https://www.google.com/doodles/">
    <input class="button" type="submit" value="I'm so lucky">
  </form>
</div>