我需要一个按钮和一个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;
}
在澄清这是为了复制/重现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;
}
尽管上述工作在Chromium 12.x和Opera 11.5(Ubuntu 11.04)中正常工作，但Firefox似乎在后者的演示中显示了一个或两个以上的像素。
