html - 如何消除所有设备上输入文本和按钮之间的差距?

标签 html css

<分区>

我有一个 输入文本字段 和一个 按钮 彼此相邻。

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

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

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

有时按钮会向下输入文本。

enter image description here

enter image description here

代码笔:

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

最佳答案

用 div 包裹 inputbutton 并将其 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>

编辑:更新了代码片段以在两者之间添加一些边距

关于html - 如何消除所有设备上输入文本和按钮之间的差距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56577358/

上一篇:css - Bootstrap 4 : Put text to the left of a button

下一篇:javascript - 如何在 React Native 中绘制虚线边框样式

相关文章:

css - 如何在 CSS 中使字体清晰?

javascript - 如何在滚动鼠标时水平移动页面?

html - 如何使网页无响应?

css - Twitter Bootstrap 和 <p> 默认高度 : why 28px?

javascript - 如何在 Firefox 中隐藏显示链接 URL 的状态栏

java - aria-hidden span/button 阻止获取元素 - Selenium

javascript - 如何控制 gif?

javascript - 在 CSS 中创建叠加层?

css - 为什么 CSS 径向渐变不适用于 &lt;!DOCTYPE html> html5

html - 将引导下拉背景更改为只是一个图像