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

CSS - Exact same height and alignment of button and input text box

提问by David

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.

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

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.

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

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?

就像我想要实现的一个简单例子：新的谷歌主页。开始输入后，自动完成开始，搜索框移动到顶部，蓝色按钮与文本框完美对齐。它可以完美地跨浏览器运行，但它在表格中进行了标记。这是否表明这可能是实现这一目标的最佳方式？

回答by David says reinstate Monica

I'd suggest trying to style the parent element of the input/buttonpairing (a fieldset, in my example) in order to give a common font-size, and font-family, then using emmeasurements for styling dimensions/padding/margins for the child elements. Ideally styling all the child elements with the same CSS.

我建议尝试设置input/button配对（fieldset在我的示例中为 a ）的父元素的样式，以便提供一个通用的font-size, 和font-family，然后使用em测量值来设置子元素的样式尺寸/填充/边距。理想情况下，使用相同的 CSS 为所有子元素设置样式。

Given the following mark-up:

鉴于以下标记：

<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>

I'd suggest something similar, but adapted to your particular design, to the following CSS:

我会建议类似的东西，但适应您的特定设计，以下 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.

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 Fiddle demo.

JS小提琴演示。

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.

尽管上述在 Chromium 12.x 和 Opera 11.5 (Ubuntu 11.04) 中运行良好，但 Firefox 似乎在后一个演示中显示了一个或两个额外的像素。

回答by Henning Fischer

I think this is very bulletproof:

我认为这是非常防弹的：

http://codepen.io/herrfischer/pen/pbkyoJ

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

On both elements just use:

在这两个元素上只使用：

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

And use "normalize.css" - that's all. Looks good on iPhone, too:

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

回答by Bogdan St?ncescu

I've been pulling my hair for hours trying to achieve this. After a lot of research and experimentation, here's the recipe for solving the OP's problem in (at least contemporary versions of) Chrome, Firefox, IE, Opera and Safari:

我一直在拉我的头发几个小时试图实现这一目标。经过大量研究和实验，以下是解决（至少是当代版本）Chrome、Firefox、IE、Opera 和 Safari 中 OP 问题的秘诀：

1. Use the same CSS regarding the box model for all types of nodes you need to align (button, input, select);
2. DOspecify the border explicitly (or at least its width);
3. DO NOTspecify the height explicitly.

1. 对于需要对齐的所有类型的节点（按钮、输入、选择），对框模型使用相同的 CSS；
2. 务必明确指定边框（或至少是其宽度）；
3. 不要明确指定高度。

Yes, that's all there is to it. Here's the most minimalist CSS that produces the desired results:

是的，仅此而已。这是产生所需结果的最简约的 CSS：

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

If you need further styling, feel free to add color, padding and margins -- everything will work out fine. But, no matter what you do, do NOT specify the height explicitly. That's the only deal breaker, because each browser calculates the height differently; some will leave an extra pixel or two above the select and not the button, some will leave them above the button and not the select, and some will work as expected.

如果您需要进一步的样式，请随意添加颜色、填充和边距——一切都会好起来的。但是，无论您做什么，都不要明确指定高度。这是唯一的交易破坏者，因为每个浏览器计算高度的方式不同；有些会在选择上方而不是按钮上方留下一两个额外的像素，有些会将它们留在按钮上方而不是选择上方，有些会按预期工作。

For the record, Chrome seems to be the most consistent in this regard (that is, if you do specify the height) -- but then again, who cares.

根据记录，Chrome 在这方面似乎是最一致的（也就是说，如果您确实指定了高度）——但话又说回来，谁在乎呢。

回答by Henry's Cat

In 2019 you want to be using CSS Grid for your forms even if they just have one input and one button.

在 2019 年，您希望为表单使用 CSS 网格，即使它们只有一个输入和一个按钮。

This saves a lot of pain.

这样可以省去很多痛苦。

I have lots going on with my working example so I will not post a working example here. Instead, here are the things you need to know.

我的工作示例有很多事情要做，所以我不会在这里发布工作示例。相反，这里是您需要知道的事情。

The outer container can be the form, CSS for this being display: grid; grid-template-rows: 2em; grid-template-columns: 1fr auto;

外部容器可以是form, CSSdisplay: grid; grid-template-rows: 2em; grid-template-columns: 1fr auto;

The input should have a label which I will assume is set to be hidden. So the CSS for the input has grid-column: 1; height: 100%;the button has grid-column: 2; height: 100%

输入应该有一个标签，我假设它被设置为隐藏。所以输入的 CSS 有grid-column: 1; height: 100%;按钮有grid-column: 2; height: 100%

You are going to do your own things with margins, backgrounds, paddings, borders, border radius and such like.

您将使用边距、背景、填充、边框、边框半径等来做自己的事情。

The crucial thing of getting the button to line up with the input is done with the grid row having a fixed height in ems or another sensible responsive friendly unit and the input and button being set to a height of 100%.

使按钮与输入对齐的关键是使用具有固定高度的网格行或其他合理的响应友好单元来完成，并且输入和按钮被设置为 100% 的高度。

I did not find any of the above answers to result in as succinct and manageable code as the CSS Grid option which works for me on Firefox, Chrome and a Webkit based browser.

我没有找到任何上述答案来生成像 CSS Grid 选项一样简洁和易于管理的代码，它适用于我在 Firefox、Chrome 和基于 Webkit 的浏览器上。

Note that if using CSS Grid then you need precisely zero divelements in your form, however, if using fieldsets you may need to set them to display: contentas CSS Grid does not work with fieldset.

请注意，如果使用 CSS Grid，那么您div的表单中需要精确地为零元素，但是，如果使用字段集，您可能需要将它们设置display: content为 CSS Grid 不适用于fieldset.

回答by Nadia Hristova

Your other option is to use Bootstrap. I solve this issue by assigning class "input-group" to the divthat wraps the input and the button/s.

您的另一个选择是使用Bootstrap。我通过将类“ input-group”分配给包装输入和按钮的div来解决这个问题。

回答by Vaclav Svara

I have checked many sources in WEB how to do it the best, cross-browser, theme-independent. I hope I have solution, bit it is not 100% (it needs to be trimmed by vertical CSS padding). My problem was to have label and text-input with the same width and compact.

我已经检查了 WEB 中的许多资源如何做到最好，跨浏览器，独立于主题。我希望我有解决方案，它不是 100%（它需要通过垂直 CSS 填充来修剪）。我的问题是让 label 和 text-input 具有相同的宽度和 compact。

Wished result: The solution I found by several experiments is described by my blog: http://vasvadev.blogspot.cz/2013/02/css-exact-same-height-and-alignment-of.html

希望的结果： 我的博客描述了我通过几次实验找到的解决方案：http: //vasvadev.blogspot.cz/2013/02/css-exact-same-height-and-alignment-of.html

Solution CSS:

解决方案 CSS：

div.lf-ui-label {
  margin: 0px;
  font-size: inherit;
  font-weight: bold;
  background-color: #CCCCCC;
  border-width: 0px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  padding-top: 4px;
  padding-bottom: 4px;
}
div.lf-ui-label + input.lf-ui-form-item {
  padding: 5px 10px 5px 10px;
  margin: 0px 0px 0px -10px;
  font-size: inherit;
  background-color: #2b55a8 !important;
  vertical-align: middle;
  border-width: 0px;
}
input.lf-ui-form-item {
  background-color: #3b3b3b;
  font-size: inherit;
  padding: 4px 7px 4px 7px;
  font-weight: bold;
  border: none 0px;
  outline: none;
}

HTML:

HTML：

<div style="padding:10px; font-family: Calibri; font-size: 14px;">
   <div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 14px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value"      style="width:71%" />
</div>
<div  style="padding:10px; font-family: Calibri; font-size: 14px;">
  Field text <input class="lf-ui-form-item" type="text" value="some other value"/>
</div>

My experimental code is shared by JSFIDDLE: css-exact-same-height-and-alignment-of.html

我的实验代码由 JSFIDDLE 共享：css-exact-same-height-and-alignment-of.html

回答by Dampas

I am trying to solve this for days and every solution is not whole, and not working in different browsers.

我试图解决这个问题好几天，但每个解决方案都不是完整的，并且不能在不同的浏览器中工作。

I find that this code do the work:

我发现这段代码可以完成工作：

float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;

I have updated Fiddle - https://jsfiddle.net/p9maozk2/

我已经更新了 Fiddle - https://jsfiddle.net/p9maozk2/

回答by Moses

When trying to achieve pixel perfect dimensions in a cross-browser way, the very first thing you should do is consider implementing a CSS reset. I prefer HTML5 Boilerplate, but there are others you can find from googling.

当尝试以跨浏览器的方式实现像素完美尺寸时，您应该做的第一件事就是考虑实现 CSS 重置。我更喜欢HTML5 Boilerplate，但你可以通过谷歌搜索找到其他的。

The CSS reset is really fundamental in normalizing cross-browser differences (especially when dealing with forms).

CSS 重置对于规范跨浏览器差异非常重要（尤其是在处理表单时）。

回答by madflow

For IE: You can style things differently by using conditional stylesheets:

对于 IE：您可以使用条件样式表来设置不同的样式：

<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="ie7e" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->

So you would write:

所以你会写：

.ie6 .my-button-class {
  //
}

回答by Odoug4

Anyone who's trying to do it now I found that this solution seems to work. Try adding :

现在任何尝试这样做的人我发现这个解决方案似乎有效。尝试添加：

  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;

to your current csson both elements which will still leave them slightly misaligned, and then play around with the top padding in the misaligned element. I found that :

到您当前css的两个元素上，这仍然会使它们略微未对齐，然后在未对齐的元素中使用顶部填充。我找到 ：

padding-top: 2px;

worked for me.

为我工作。