CSS - 与按钮和输入文本框完全相同的高度和对齐方式 [英] CSS - Exact same height and alignment of button and input text box

问题描述

我需要一个按钮和一个tex框，彼此相邻，他们必须完全对齐，如果一个比另一个更大，那么它会立即明显。

I need to have a button and a tex box sitting next to each other and they have to align up perfectly as if one is bigger than the other then it will be instantly noticeable.

通常我不会担心浏览器之间的小差异，但这两个输入坐在每个页面上非常突出的位置，是网站的一个很大的功能，所以他们必须完全对齐所有主要的浏览器和缩放级别。

Usually I wouldnt bother about small differences between browsers, but these two input are sitting in a very prominent position on every page and are a big feature of the site so they have to align perfectly in all major browsers and zoom levels.

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

Does anyone have any advice on how to achieve this.

就像我试图实现的一个快速示例：新的google主页。开始输入自动填充后，搜索框移动到顶部，蓝色按钮完全对齐到文本框。它工作完美的跨浏览器，但它标记在一个表中。这是否表明这可能是实现这个的最好方法？

Just as a quick example of what i am trying to achieve: the new google homepage. After starting to type the autocomplete kicks in and the search box is moved to the top with a blue button perfectly aligned to the text box. It works perfectly cross browser but its marked up in a table. Does that suggest that this may be the best way of achieving this?

推荐答案

我建议尝试风格的父元素输入 / 按钮配对（ fieldset 为了给出一个共同的 font-size 和 font-family ，然后使用 em 测量子元素的尺寸/填充/边距。最好用相同的CSS为所有子元素设置样式。

I'd suggest trying to style the parent element of the input/button pairing (a fieldset, in my example) in order to give a common font-size, and font-family, then using em measurements for styling dimensions/padding/margins for the child elements. Ideally styling all the child elements with the same 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：

I'd suggest something similar, but adapted to your particular design, to the following 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 。

---

以下澄清说明这是为了复制/邻接的文本输入/提交按钮：

---

Following the clarification that this is to replicate/reproduce the style of Google's adjoined text-input/submit button:

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）一个额外的像素或两个在后面的演示。

Albeit the above works fine in Chromium 12.x and Opera 11.5 (Ubuntu 11.04), Firefox seems to show an extra pixel or two in the latter demonstration.

这篇关于CSS - 与按钮和输入文本框完全相同的高度和对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！