Как выровнять кнопку с двумя метками над и под входом

Question

В настоящее время я использую Bootstrap 4 и пытаюсь выровнять кнопку по входу с двумя надписями над и под ним.

Это работает, если я помещаю кнопку вне тега формы, но яМне нужно сохранить его, чтобы коды Javascript работали.

Я попытался использовать класс form-inline, и он хорошо работает, если над входом есть только одна метка, но если под ней есть другая метка, кнопкапрекращает выравнивание по входу.

Чтобы появилась нижняя метка, вам просто нужно ввести букву на входе и нажать ввод, и кнопка сама выровняется.

Я хочукнопка для постоянного выравнивания по правому краю со входом:

        <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, поэтому кнопка всегда отображается в нижней части окна.

Даже если вы попытаетесь изменить его на: align-self: center, он не будет работать нормально, если есть только верхняя метка без нижней метки: см. Изображение:

Существует простое решение: Как только верхняя метка всегда фиксируется с высотой 24 пикселя, Вы также можете зафиксировать положение кнопки.

Для этого сначала я удалил класс 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 поля.