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

Question

我目前正在使用 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>

Answer 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一样。