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

Question

我需要一个按钮和一个tex盒子彼此相邻,它们必须完美对齐,好像一个比另一个大,然后它会立即引人注目.

通常我不会理解浏览器之间的细微差别,但这两个输入位于每个页面上非常突出的位置,并且是网站的一个重要特征,因此它们必须在所有主要浏览器和缩放级别中完美对齐.

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

就像我想要实现的一个简单示例:新的谷歌主页.在开始输入自动完成功能后,搜索框将移动到顶部,蓝色按钮与文本框完全对齐.它完美地跨浏览器工作,但它在表格中标记.这是否表明这可能是实现这一目标的最佳方式？

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小提琴演示.

在澄清这是为了复制/重现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小提琴演示.

虽然上面的工作在Chromium 12.x和Opera 11.5(Ubuntu 11.04)中运行良好,但Firefox似乎在后一个演示中显示了一两个像素.

Answer 2

为了达到这个目的,我已经把头发拉了好几个小时.经过大量的研究和实验,这里是解决OP(至少当代版本)Chrome,Firefox,IE,Opera和Safari中OP问题的方法:

1. 对于需要对齐的所有类型的节点(按钮,输入,选择),使用与盒子模型相同的CSS;
2. 请明确指定边界(或至少指定其宽度);
3. 请勿明确指定高度.

是的,这就是它的全部.这是产生预期结果的最简约的CSS:

select, input, button {
    border-width: 0px;
}

如果你需要进一步的造型,可以随意添加颜色,填充和边距 - 一切都会很好.但是,无论你做什么,都不要明确指定高度.这是唯一的交易破坏者,因为每个浏览器以不同的方式计算高度; 有些会在选择而不是按钮上留下额外的一两个像素,有些会将它们留在按钮上方而不是选择,有些会按预期工作.

为了记录,Chrome似乎是这方面最一致的(也就是说,如果你指定了高度) - 但是再一次,谁在乎.

Answer 3

我认为这非常防弹：

http://codepen.io/herrfischer/pen/pbky​​oJ

在这两个元素上只需使用：

display: inline-block;
padding: 10px 15px;
font-size: 20px;
border-radius: 0;
-webkit-appearance: none;
border: 1px solid transparent;

并使用“ normalize.css”-仅此而已。在iPhone上看起来也不错：

Answer 4

使用带有图像的背景 div 作为输入。这样更容易保持一致。此外，绝对定位也适合这种情况。

编辑：我5年前写了这个答案，现在有更好的方法。