css - 按钮与输入对齐

Question

这是我的代码：

<div class="input-append">

                        <input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />


                        <input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />

<button class="btn btn-mini">Envoyer</button>
     </div>

这是结果：

请问如何将按钮与字段对齐？

问候比西尔

Answer 1

您可以手动将高度设置为相同的值

.input-large,
.btn-mini {
   height: 60px;
}

Answer 2

如果我正确地遵循您的问题，您将需要在 CSS 中为它们中的每一个设置一个“高度”属性，以使它们具有相同的高度对齐。

我不是 CSS 大师，但这里有一个应该可以工作的例子：

<style>
.equal_height input, .equal_height button { height: 40px; }
</style>

<div class="input-append equal_height">
     <input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />
     <input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />
      <button class="btn btn-mini">Envoyer</button>
</div>