CSS – 完全相同的高度和对齐的按钮和输入文本框

我需要一个按钮和一个tex框坐在彼此旁边，他们必须完美对齐，就像一个比另一个更大，那么它将立即显着。

通常我不会担心浏览器之间的小差异，但是这两个输入在每个页面上都处于非常突出的位置，是该网站的一大特色，因此必须在所有主流浏览器和缩放级别上完美匹配。

有没有人有任何建议如何实现这一点。

就像我想要实现的一个简单例子：新的google主页。开始输入自动完成功能后，搜索框将移动到顶部，蓝色按钮与文本框完全对齐。它完美的跨浏览器，但它标记在一个表。这是否表明这可能是实现这一目标的最佳途径？

解决方法

我建议尝试对输入/按钮配对的父元素(在我的示例中为一个字段集)设置样式，以便给出一个通用的字体大小和font-family，然后使用em测量来确定样式尺寸/填充/边距为孩子元素。理想地使用相同的CSS来创建所有的子元素。

鉴于以下标准：

<form action="#" method="post">
    <fieldset>
        <label for="something">A label for the text-input</label>
        <input type="text" name="something" id="something" />
        <button>It's a button!</button>
    </fieldset>
</form>

我建议类似的东西，但适应您的特定设计，以下CSS：

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
}

label,input,button {
    font-size: inherit;
    padding: 0.2em;
    margin: 0.1em 0.2em;
    /* the following ensures they're all using the same Box-model for rendering */
    -moz-Box-sizing: content-Box; /* or `border-Box` */
    -webkit-Box-sizing: content-Box;
    Box-sizing: content-Box;
}

JS Fiddle demo。

在澄清这是为了复制/重现Google相邻文本输入/提交按钮的风格：

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
    border-width: 0;
}

label,button {
    font-size: inherit;
    padding: 0.3em 0.4em;
    margin: 0.1em 0.2em;
    -moz-Box-sizing: content-Box;
    -webkit-Box-sizing: content-Box;
    Box-sizing: content-Box;
    border: 1px solid #f90;
    background-color: #fff;
}

input {
    margin-right: 0;
    border-radius: 0.6em 0 0 0.6em;
}
input:focus {
    outline: none;
    background-color: #ffa;
    background-color: rgba(255,255,210,0.5);
}
button {
    margin-left: 0;
    border-radius: 0 0.6em 0.6em 0;
    background-color: #aef;
}
button:active,button:focus {
    background-color: #acf;
    outline: none;
}

JS Fiddle demo。

尽管上述工作在Chromium 12.x和Opera 11.5(Ubuntu 11.04)中正常工作，但Firefox似乎在后者的演示中显示了一个或两个以上的像素。