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

Question

我需要让一个按钮和一个文本框并排放置，并且它们必须完美对齐，就好像一个比另一个大，然后它会立即引人注目。

通常我不会为浏览器之间的微小差异而烦恼，但这两个输入在每个页面上都位于非常显眼的位置，并且是网站的一大特色，因此它们必须在所有主要浏览器和缩放级别中完美对齐。

有没有人对如何实现这一目标有任何建议。

作为我正在尝试实现的目标的快速示例:新的 Google 主页。开始键入自动完成后，搜索框将移动到顶部，蓝色按钮与文本框完美对齐。它可以完美地跨浏览器运行，但它在表格中进行了标记。这是否表明这可能是实现这一目标的最佳方式？

Answer 1

我建议尝试按顺序设置 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 似乎在后者的演示中显示了一两个额外的像素。