我建议尝试设置input/button 配对的父元素的样式（在我的示例中为fieldset），以便给出一个共同的font-size 和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, input, 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 在后面的演示中似乎显示了一两个额外的像素。