0

I've an input text field and a button next to each other.

The problem is that there is a gap between this two elements.

I can fix this by changing the margin-bottom of the button to 5px.

But maybe there is a more clever way of fixing this? As I need both of them to be next to each other on every device.

Some times the button goes down the input text.

enter image description here

enter image description here

Codepen:

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

Omar Gonzales
  • 3,806
  • 10
  • 56
  • 120

2 Answers2

3

Wrap both the input and button with a div and set its display to 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>

Edit: Updated the snippet to add some margin between the two

nimsrules
  • 2,026
  • 20
  • 22
  • ty. Works great. Is there a way to put some spacing between the input and the button, with the flex class the appear inline (as desidered) but without space between each other. – Omar Gonzales Jun 13 '19 at 09:41
  • 1
    You can give either of the elements some `margin`. I've updated the above snippet – nimsrules Jun 13 '19 at 09:42
  • You've added some space using pixels, I've been recommended to add it using %, what is your take on this recomendation? ty. – Omar Gonzales Jun 13 '19 at 09:45
  • Is there a specific reason to use %? I can understand using % to create your layout and set the size of the containers. I don't see any harm in using pixels to set apart two elements – nimsrules Jun 13 '19 at 09:46
  • No, no specific reason, just asking. I was told that for a better response on each device to use %, and with text size erm. – Omar Gonzales Jun 13 '19 at 09:48
  • And I concur with the same as I mentioned in my previous comment that it's perfect for creating a layout and spacing out the containers which will let you achieve an adaptive design (not responsive, there's a minor difference). I've noticed that you're already using Bootstrap. Why not take its leverage to maintain the responsiveness! – nimsrules Jun 13 '19 at 09:50
0

Add float: left; to the input and float: right; to the button.

Screenload
  • 431
  • 2
  • 14