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（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ファイルはここにあります

今私はこれを見ます：

ここに画像の説明を入力してください

では、最小限のコード変換で2つの要素を1行にレイアウトするにはどうすればよいでしょうか。

4

4 に答える 4

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 に答える
0

float: left;CSS クラスに追加します。

もちろん、あなたのtd幅が十分に広いことを考えると、それはうまくいくはずです。

于 2013-01-17T11:09:58.247 に答える
0

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>
于 2013-01-17T11:10:38.090 に答える