Question

我对Web开发还很陌生，并且已经尝试了几个小时才能弄清楚这一点。我正在尝试将按钮与输入部分而不是标签对齐。我试图在StackOverflow上找到一些解决方案，但它似乎不起作用。

在CSS中，我尝试使用margin-top并仅按下按钮以使其与输入对齐，我想这是行得通的，但必须有一种更简单/更好的方法。

这是我的代码（屏幕截图）

Code

Result

Answer 1

尝试在提交时添加标签，然后将其隐藏。

P.S。添加标签也将有助于辅助功能。

Answer 2

尝试将“ align-self-end”类插入最后一个“ col-md-3”。

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

Answer 3

您可以使用html表格！

查看此page以获得更多信息。

尝试一下：

<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>

将按钮与输入对齐

3 个答案: