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

This question already has answers here:

Align inline-block DIVs to top of container element

                                    （4个答案）



                            How to stop text from taking up more than 1 line?

                                    （5个答案）


                                7个月前关闭。


我彼此之间是input text field和button。

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

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

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

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

Codepen：

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

最佳答案

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

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

关于html - 如何摆脱所有设备上输入文本和按钮之间的空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56577358/

上一篇：css - Bootstrap 4:将文字放在按钮的左侧

下一篇：javascript - 如何在 native react 中绘制虚线边框样式

相关文章：

javascript - 图像 map 区域元素上的 Onclick 事件

javascript - BEM 和 "active"类/解耦 HTML 和 JS

javascript - 完全加载外部html文件的问题

html - 如何防止文本显示在搜索图标后面

css - 几乎所有的 Bootstrap 样式在 IE8 中都不起作用。在 chrome 和 firefox 中工作正常

javascript - 我如何才能将箭头图像放置在“answer1”的左侧

jquery下拉菜单，复用功能

html - 在浏览器调整大小 div 下降

css - 如何使用 grunt sass 编译压缩 scss 为 css？

html - 尝试居中对齐 Ebay 模板 - 但不起作用