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

Question

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

如果我将按钮放在表单标记之外，它会起作用，但我需要将它保留在那里以使 Javascript 代码正常工作。

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

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

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

图片在这里

这是我的代码笔： 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>

Answer 1

问题是你正在使用：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
}

您可以查看此代码笔进行检查。

Answer 2

您可以将空标签添加到按钮的 div 以使其与字段对齐：

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

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