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

Question

我有这样的表部分：

<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>

和CSS（SASS）：

.qnt_to_cart, .qnt_to_cart2{
  width: 30px;
  height: 20px;
}

.orange-button{
  display: inline-block;
  padding: 6px;
  @include gradient-background(bottom, $or1, #fbb752); 
  //background: url('button-carbon-bg.png') no-repeat, -webkit-linear-gradient(bottom, $or1, #fbb752);
  @include border-radius(5px, 5px, 5px, 5px);
  //background: transparent url('button-carbon-bg.png') no-repeat;
  border: 1px solid #d27d00;
  font-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: $or3;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .70);
  font-style: normal;
  @include box-shadow(inset 0 1px 0 rgba(255,255,255,0.5));
  border-bottom:2px solid #B16900;
}

所有的css文件在这里

现在我看到了：

那么如何以最少的代码转换在一行上布置两个元素呢？

Answer 1

添加float: left; 到您的CSS类。

鉴于您的td当然足够宽，这应该可以解决问题。

Answer 2

在我看来，这2个元素没有足够的空间可以并排放置，这导致按钮传递到下一行。

尝试使父元素更宽一些。

编辑

尝试添加这样的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>

并将其添加到CSS

.wrapper_test { width: 150px } /* or a little more if needed */

---

或者，这。

<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>

Answer 3

尝试这个：

<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>

希望这可以帮助！

Answer 4

display:inline-block;

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

display:block;

在父元素上