0

我有这样的表格部分：

<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（萨斯）：

.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文件都在这里

现在我看到了：

在此处输入图像描述

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

4

4 回答 4

0

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

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

于 2013-01-17T11:09:58.247 回答
0

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

尝试使父元素更宽一些。

编辑

尝试添加这样的 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>
于 2013-01-17T11:10:38.090 回答
0

试试这个：

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

希望这可以帮助！

于 2013-01-17T11:16:49.583 回答
0 
display:inline-block;

你需要在这两个元素上

display:block;

在父元素上

于 2013-04-17T12:37:15.707 回答