Html 将输入和按钮对齐在一行上

我有这样的表格部分：

<td>
  <form accept-charset="UTF-8" action="/line_items" method="post">
    <input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1">
    <input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину">
  </form>
</td>

现在我看到：

---

那么，如何在一行上布局两个元素，并且代码转换最少？

添加

float:left到您的CSS类

考虑到您的
td
当然足够宽，这应该可以解决问题。
在我看来，这两个元素没有足够的空间并排放置，这导致按钮传递到下一行

尝试将父元素稍微加宽一点

编辑

尝试添加这样的div

<td>
  <form accept-charset="UTF-8" action="/line_items" method="post">
    <div class="wrapper_test">
      <input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1">
      <input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину">
    </div>
  </form>
</td>


或者，也可以这样做

<td>
  <form accept-charset="UTF-8" action="/line_items" method="post">
    <table><tr><td>
      <input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1">
    </td><td>
      <input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину">
    </td></td></table>
  </form>
</td>


试试这个：

<tr>
  <td colspan="2">
    <form accept-charset="UTF-8" action="/line_items" method="post">
      <input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1">
    </form>
  </td>

  <td align="right">
    <form accept-charset="UTF-8" action="/line_items" method="post">
      <input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину">
    </form>
  </td>
</tr>



希望这有帮助

display:inline-block;

您需要在两个元素上都使用此选项

display:block;

在父元素上
如果没有任何限制表格宽度的内容，则按钮和文本框应并排放置。我将添加一个带有另一个想法的编辑。
display:inline-block;

display:block;