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

时间：2011-07-17 19:14:38

标签： css forms cross-browser

我需要一个按钮和一个tex盒子彼此相邻，它们必须完美对齐，好像一个比另一个大，然后它会立即变得明显。

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

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

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

11 个答案:

答案 0 :(得分：21)

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

答案 1 :(得分：7)

为了达到这个目的，我已经把头发拉了几个小时。经过大量的研究和实验，这里是解决OP（至少当代版本）Chrome，Firefox，IE，Opera和Safari的OP问题的方法：

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

    4. 是的，这就是它的全部。这是产生预期结果的最简约的CSS：

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

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

    为了记录，Chrome在这方面似乎是最一致的（也就是说，如果你指定了高度） - 但是再一次，谁在乎。

答案 2 :(得分：4)

我认为这是非常防弹的：

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

在两个元素上只使用：

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

并使用“normalize.css” - 就是这样。在iPhone上看起来也不错：

enter image description here

答案 3 :(得分：1)

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

希望的结果： Wished result 我通过几个实验找到的解决方案由我的博客描述：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&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>

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

答案 4 :(得分：0)

当尝试以跨浏览器方式实现像素完美尺寸时，您应该首先考虑实施CSS重置。我更喜欢HTML5 Boilerplate，但您可以通过Google搜索找到其他内容。

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

答案 5 :(得分：0)

对于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 {
  //
}

答案 6 :(得分：0)

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

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

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

我更新了小提琴 - https://jsfiddle.net/p9maozk2/

答案 7 :(得分：0)

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

这可以节省很多痛苦。

我的工作示例正在进行很多工作，因此我不会在此处发布工作示例。相反，这是您需要了解的事情。

外部容器可以是form，为此的CSS是display: grid; grid-template-rows: 2em; grid-template-columns: 1fr auto;

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

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

使按钮与输入对齐的关键是在网格行中以ems或其他明智的响应式友好单位固定高度，并将输入和按钮设置为100％的高度。

我没有找到以上任何答案来产生像CSS Grid选项那样简洁且易于管理的代码，该选项对我在Firefox，Chrome和基于Webkit的浏览器上有效。

请注意，如果使用CSS Grid，则您的表单中需要精确的零个div元素，但是，如果使用字段集，则可能需要将它们设置为display: content，因为CSS Grid无法与{{ 1}}。

答案 8 :(得分：0)

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

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

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

padding-top: 2px;

为我工作。

答案 9 :(得分：-1)

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

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

答案 10 :(得分：-1)

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

相关问题
最新问题