Question

我彼此之间有一个input text field和一个button。

问题在于这两个元素之间存在差距。

我可以通过将按钮的margin-bottom更改为5px来解决此问题。

但是也许有更聪明的方法来解决这个问题？因为我需要它们在每个设备上都彼此相邻。

有时按钮会在输入文本下移。

Codepen：

https://codepen.io/anon/pen/RzPqLw

Answer 1

用div包裹input和button并将其display设置为flex

.flex {
  display: flex;
}

.flex input {
  margin-right: 3px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container margin-top10 margin-bottom5">
  <div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 text-center">
      <h1 class="text-center my_title">
        Tu carrito de compras
      </h1>
    </div>
  </div>

  <br>
  <br>
  <div class="row">
    <div class="col-12 col-sm-12 col-md-6 col-lg-6 text-center">
      <table class="table my_custom_table">
        <thead class="my_custom_thead">
          <tr>
            <th colspan="5">
              Tus items
            </th>
          </tr>
        </thead>
        <tbody>
          <!-- MOSTRAR SAMPLE_ITEMS IN CART_DETAIL -->
          <tr>
            <td>
              <a href="cart_item.product.get_absolute_url"><img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/sample_images/Artboard_1.png" alt="" class="float-left rounded" width="90" height="90"></a>
            </td>
            <td class="text-left">
              <p class="margin-bottom0"><b>Sobre con muestras</b></p>
              <p class="margin-top0 margin-bottom0">Cantidad: 5 stickers</p>
              <p class="margin-top0 margin-bottom0">Tamaño: varios</p>
            </td>
            <td>
              <p>S/5

                <a href="/carrito_de_compras/full_remove_sample/163/" class="custom_icon"><i class="fas fa-trash-alt custom_icon"></i></a>
              </p>
            </td>
            <td></td>

          </tr>



        </tbody>
      </table>
    </div>

    <div class="col-12 col-sm-12 col-md-6 col-lg-6 text-center">

      <table class="table my_custom_table">

        <thead class="my_custom_thead">

          <tr>
            <th>
              Checkout
            </th>
          </tr>
        </thead>
        <tboyd>
          <tr>
            <td>
              Por favor, revise su Carrito de Compras antes de proceder con el pago de la orden
            </td>
          </tr>
          <tr>
            <td class="text-left">
              <div class="row">
                <div class="col-6">
                  Total: S/5<br> Costo de envío: S/15<br> Descuento: <span class="savings"><b>S/0</b></span><br> A pagar: <strong>S/20</strong><br>
                </div>
                <div class="col-6">
                  <br>
                  <div class="flex">
                    <input type="text" id="user_cupon" style="display: inline-block; height: 36px;" placeholder="Ingrese cupón">
                    <button type="submit" class="btn btn-secondary" id="cuponButton" style="display: inline-block; height: 35px;">Enviar</button>
                  </div>
                </div>
              </div>
            </td>
          </tr>


          <tr>
            <td class="text-left">
              <b>Dirección de envío:</b>
              <select type="text" id="ShippingAddress">
                <option value="Urb. La Merced Mz.G Lot.32" selected>
                  Urb. La Merced Mz.G Lot.32</option>
                <option value="">
                </option>
              </select>
            </td>
          </tr>


          <tr>
            <td>
              <div class="bg-buttons margin-top3 padding-top6 padding-bottom3">






              </div>

            </td>
          </tr>
        </tboyd>
      </table>
    </div>
  </div>
</div>

编辑：：更新了代码段，在两者之间添加了一些空白

Answer 2

在输入中添加float: left;，在按钮中添加float: right;。

如何摆脱所有设备上输入文本和按钮之间的空白？

2 个答案: