按钮与输入对齐

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>