如何将按钮与输入上方和下方的两个标签对齐答案

【问题标题】：How to align the button with two labels above and below the input如何将按钮与输入上方和下方的两个标签对齐
【发布时间】：2019-11-21 11:01:23
【问题描述】：

我目前正在使用 Bootstrap 4，我正在尝试将按钮与上下两个标签的输入对齐。

如果我将按钮放在表单标签之外，它可以工作，但我需要将它保留在那里以便 Javascript 代码工作。

我尝试过使用 form-inline 类，如果输入上方只有一个标签，效果很好，但如果下方有另一个标签，按钮将停止与输入对齐。

要让底部标签出现，您只需要在输入中输入一个字母并按回车键，按钮就会自行错位。

我希望按钮始终与输入保持对齐。

Image here

这是我的代码笔： https://codepen.io/rkcmorley/pen/Oeqvdv

这是 html 代码：

        <article>
            <div class="container">
                <div class="row searchSection">
                    <form id="searchForm" class="form-inline input-group input-group-lg">
                        <div class="col-lg-10 form-group align-self-start">
                            <label class="postcode">Zip Code</label>
                            <input type="text" name="text" autocomplete="off">
                        </div>
                        <div class="col-lg-2 form-group align-self-end">
                            <button type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </article>

【问题讨论】：

Codepen 似乎没有显示问题
它确实证明了这个问题。键入一个字母并按回车键，按钮不会自行对齐。您也可以查看提供的图片。
所以你想在表格的右边或底部对齐它？
它应该向右对齐。

标签： css bootstrap-4

【解决方案1】：

您可以在按钮的 div 中添加一个空标签以使其与字段对齐：

<div class="col-lg-2 form-group align-self-start">
  <label>&nbsp;</label>
  <button type="submit">Submit</button>
</div>

我这里也用了align-self-start，和字段的div一样。

【讨论】：

这对我很有效。无需创建额外的 CSS 代码。

【解决方案2】：

问题是你使用的是：align-self: end 所以按钮总是显示在 div 的底部。

即使您尝试将其更改为：align-self: center，当只有顶部标签而没有底部标签时，它也无法正常工作：参见图片：

有一个简单的解决方案：一旦顶部标签始终固定在 24px 的高度，您还可以固定按钮的位置。

为了实现这一点，我首先删除了 'align-self-end' 类并添加了 .fixed 样式类：

.fixed { 
   display: block !important;
   margin-top: 24px;
} 

.fixed button { 
 line-height: 47px; //because line-height of input is 47px so it'll ethe same height
}

你可以看this codepen查看。

【讨论】：