Html CSS：在输入端附加一个高度对齐的按钮

让我们假设一下，我不希望使用引导程序。 你如何通过按钮实现输入的完美垂直对齐？当我这样做时，按钮垂直错位。我不想在页边空白处使用“黑客”来解决这个问题，因为我担心它不会在所有浏览器上都很好

bootstrap是如何实现这种魔力的

我的目标是这样的：

---

您必须使用容器并将两者显示为表格单元格（）：

标记：

<div class="container">
    <input type="text" placeholder="Your text here">
    <div class="button">
        <a>Button</a>
    </div>
</div>

注:

---

记住一般的事情，比如两者都有相同的字体大小和填充。为了使它看起来光滑，你可以像在引导程序中一样绕过外角：）

有一个带有明确高度的输入和按钮。

输入

和

按钮

需要在它们之间添加注释才能“连接”，否则它们将有一个难看的空间

.target{
高度：2米；
}
.目标*{
身高：100%；
显示：内联块；
边界：无；
大纲：无；
}
.目标输入{
宽度：79%；
背景色：黑色；
左侧填充：5px；
}
.目标按钮{
宽度：10%；
背景颜色：橙色；
框大小：边距框；
填充：0；边距：0；
边框顶部：2个橙色；
}

酒吧

我认为答案应该是使用

框大小：边框框

，就像bootstrap一样。这适用于所有最新的现代浏览器：

<input type="text" placeholder="Your text here">
<button>Button</button>

---

垂直对齐怎么样？？你能告诉我们哪些代码不适合你吗？在最近的Firefox、Chrome或Safari中，这些代码看起来并不完全对齐。@mmgross或…IE11=（Datter ball'd.我正在进行IE11修复，最新的chrome和ff在我的机器上按预期运行。我现在在chrome上的外观截图（v15）：完美，

框大小

修复了我在chrome中对齐元素，但在Firefox上减少一个像素的问题。

<input type="text" placeholder="Your text here">
<button>Button</button>

input{
    float: left;
    height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button{
    float: left;
    height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}