Выровнять кнопку с вводом

Question

Я довольно новичок в веб-разработке, и я часами пытался понять это.Я пытаюсь выровнять мою кнопку вместе с разделами ввода вместо меток.Я попытался найти несколько решений для StackOverflow, но, похоже, это не работает.

В CSS я попытался использовать margin-top и просто нажать кнопку вниз, чтобы выровнять его с вводом, который, я думаю, вроде бы работает, но должен быть гораздо более простой / лучший способ.

Вот мой код (скриншоты)

Код

Результат

Answer 1

Вы можете использовать HTML-таблицы!

Проверьте эту страницу для получения дополнительной информации.

Попробуйте:

<form class="container-fluid py-3 m-O">
<h2 class="py-3">Want to sign up for our free monthly newsletter?</h2>
<div class="form-row">
    <table style="width:100%">
      <tr>
        <th>First Name:</th>
        <th>Last Name:</th> 
        <th>Email:</th> 
      </tr>
      <tr style="text-align: center;">
        <td >
            <input type="text" class="form-control" placeholder="First name">
        </td>
        <td>
            <input type="text" class="form-control" placeholder="Last name">
        </td>
        <td>
            <input type="text" class="form-control" placeholder="Email">
        </td>
        <td>
            <button type="submit" class="btn-md btn-always-col">Submit!</button>
        </td>
      </tr>
</div>

Answer 2

Попробуйте добавить ярлык при отправке, а затем скрыть его.

PS Добавление ярлыка также будет полезно для доступности.

Answer 3

Попробуйте вставить класс «align-self-end» в последний «col-md-3».

<div class=“col-md-3 align-self-end“>
    <button>
</div>