按钮与输入对齐答案

【问题标题】：button alignign with input按钮与输入对齐
【发布时间】：2012-10-12 07:59:45
【问题描述】：

这是我的代码：

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

结果如下：

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

问候比西耶

【问题讨论】：

请提供您的css代码以获取更多信息
您是在问如何垂直对齐它们（因此它们的高度相同）？
您使用了哪些额外的 CSS？您问题中的 HTML - 与 Twitter Bootstrap 结合使用时 - 看起来不像您的屏幕截图：jsfiddle.net/XTuUc
bootstrap: align input with button的可能重复

标签： css twitter-bootstrap

【解决方案1】：

如果我正确地遵循了您的问题，您将需要在 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>

【讨论】：

注意：这是我使用的一个可怕的命名约定，这只是一个让你开始的例子。 :)

【解决方案2】：

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

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

【讨论】：

我必须输入 : 谢谢