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

Question

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

通常我不会担心浏览器之间的微小差异，但这两个输入位于每个页面上非常突出的位置，并且是该网站的一大功能，因此它们必须在所有主要浏览器和缩放级别中完美对齐。

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

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

Answer 1

.sdiv {
padding-top: 33px;
padding-left: 33px;
height: 123px;
border: 1px dotted red;
border-radius: 7px;
background-color: Black;
}

.sbtn {
float:left;
height:24px;
width: 24px;
padding: 3px 0 0 0;
border:none;
margin-top: 14px;
background-color: white;
}

.stxt {
width: 180px;
height:22px;
float:left;
border:none;
padding-left:3px;
margin-top: 14px;
}

<div class="sdiv">
<form action="/">

<input class="stxt" type="text" placeholder="Search..." value="">

<button class="sbtn" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" role="icon" viewBox="0 0 18 18" width="18" height="18">
<path fill-rule="evenodd" d="M 12.864 11.32 h -0.813 l -0.288 -0.277 A 6.66 6.66 0 0 0 13.38 6.69 a 6.69 6.69 0 1 0 -6.69 6.69 a 6.66 6.66 0 0 0 4.354 -1.617 l 0.278 0.288 v 0.813 L 16.467 18 L 18 16.467 l -5.136 -5.146 Z m -6.174 0 a 4.625 4.625 0 0 1 -4.632 -4.63 A 4.625 4.625 0 0 1 6.69 2.058 a 4.625 4.625 0 0 1 4.63 4.632 a 4.625 4.625 0 0 1 -4.63 4.63 Z" />
</svg>
</button>

</form>
</div>

所有优秀的答案！但没有一个是我真正想要的......

我从更直接的方法中获得了更多满足：

Answer 2

我建议尝试设置 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 演示。

---

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 演示。

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

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

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

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

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

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

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

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

Answer 5

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

这可以节省很多痛苦。

我的工作示例有很多内容，因此我不会在这里发布工作示例。相反，这里是您需要了解的事情。

外部容器可以是 form，CSS 是 display: grid;网格模板行：2em； grid-template-columns: 1fr auto;

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

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

让按钮与输入对齐的关键是使用具有固定高度（以 em 为单位）的网格行或其他合理的响应式友好单位，并将输入和按钮设置为 100% 的高度。

我没有找到任何上述答案来产生像 CSS 网格选项那样简洁和可管理的代码，该选项适用于 Firefox、Chrome 和基于 Webkit 的浏览器。

请注意，如果使用 CSS 网格，那么您的表单中需要恰好零个 div 元素，但是，如果使用字段集，您可能需要像 CSS 网格一样将它们设置为 display: content不适用于fieldset。

Answer 6

我检查了很多WEB资源如何做到最好，跨浏览器，独立于主题。我希望我有解决方案，但它不是 100%（它需要通过垂直 CSS 填充进行修剪）。我的问题是让标签和文本输入具有相同的宽度和紧凑。

期望的结果：

我通过多次实验找到的解决方案在我的博客中进行了描述： http://vasvadev.blogspot.cz/2013/02/css-exact-same-height-and-alignment-of.html

解决方案
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：

<div style="padding:10px; font-family: Calibri; font-size: 14px;">
   <div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 14px </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>

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

Answer 7

我花了几天时间试图解决这个问题，但每个解决方案都不完整，并且无法在不同的浏览器中工作。

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

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

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

Answer 8

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

Answer 9

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

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

Answer 10

对于 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]-->

因此您可以编写：

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

Answer 11

对于现在尝试这样做的人，我发现这个解决方案似乎有效。尝试将 : 添加

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

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

padding-top: 2px;

对我有用。

Answer 12

这是垂直对齐的 input + button 组合的示例，元素之间没有边距（感谢 font-size:0px），并且当选择输入字段时，其垂直高度不会增加；这里 font-size 控制垂直高度，而 line-height 会导致垂直错位。

html

<div class="emailbuttonparent">
<input type="email" class="emailaddr" placeholder="email" />
<input type="button" value="Get Started" />
</div>

css

.emailbuttonparent {
    font-size: 0;
}

select, input, button {
    display:inline-block;
    border-width: 0px;
    font-size: 25px;
}


    input[type="email"]:focus {
        background-color: #f1f1f1;
        color: #fff;
        outline: 0;
    } 

Answer 13

嗯，已经过去了大约十年的时间，我对已经发布的任何内容都不满意，所以我花了几天时间来找出解决这个问题的解决方案，该解决方案至少在以下内容中完美运行浏览器版本：

• Chrome >= 4
• Firefox >= 4
• Safari >= 3
• Opera >= 11
• IE >= 9
• Edge 97

HTML

<div id="container">
  <input type="text">
  <button>test</button>
</div>

CSS

#container,
#container input,
#container button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

#container {
  display: table;
}

#container input,
#container button {
  float: left;
  display: table-cell;
  padding: 0;
  height: ...; /* e.g. 2.8em */
  font-size: ...; /* e.g. 14px */
  border: ...; /* e.g. 1px solid red */
}

除上述之外所需的最低 CSS 规则，您可以更改大多数其他常用的样式规则，例如 color、background-color、box-shadow、border-radius 等等，只要你喜欢。然而，有些事情可能会稍微限制您的样式选择。例如，您应该避免添加/调整 padding，尤其是顶部/底部，因为它可能会剪切文本（如果是，请使用 height / width 规则可能的）。

Answer 14

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

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