在一行上对齐输入和按钮答案

【问题标题】：Align input and button on one line在一行上对齐输入和按钮
【发布时间】：2013-01-17 11:02:28
【问题描述】：

我有这样的表格部分：

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

All css file is here

现在我看到了：

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

【问题讨论】：

标签： html css haml sass

【解决方案1】：

试试这个：

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在我看来，这 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>

【讨论】：

如果没有任何东西限制表格的宽度，按钮和文本框应该并排。我将添加另一个想法的编辑。

【解决方案4】：

display:inline-block;

你需要在两个元素上使用

display:block;

在父元素上

【讨论】：