如何正确对齐跨度和输入元素？答案

【问题标题】：How to properly align the span and input elements?如何正确对齐跨度和输入元素？
【发布时间】：2017-08-30 01:44:07
【问题描述】：

我想对齐 <span> 元素和 <input> 文本元素。 <input>和<span>的高度应该相同，上下边框应该在同一行，<input>和<span>元素内的文字应该在同一行。

.cnt {
  margin: 5px;
}
.one {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.two {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.in {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
input {
  padding: 0;
}

<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

https://jsfiddle.net/ajo4boom/

如何做我想做的事？

【问题讨论】：

使用line-height和vertical-align。
高度很难输入，因为浏览器都喜欢做自己的事情。我认为无论您的解决方案如何，浏览器之间都会存在非常细微的差异。您最好使用带有样式的禁用输入，这样您就可以保证它们会对齐，因为它们将是相同的元素类型。
可能重复：Why is my textarea higher up than it's neighbor?

标签： html css

【解决方案1】：

我通过使用外部样式表（例如normalize.css）获得了成功。它们对于确保您的标签在所有浏览器中保持对齐非常有用。

另一种解决方案是执行以下操作：

.cnt {
  margin: 5px;
}
.one {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.two {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.in {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
input {
  position: relative;
  top: -1px;
  padding: 0;
}

<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

只需通过添加来抵消<input>

input {
    position: relative;
    top: -1px;
}

More info on relative positioning in CSS.

【讨论】：

【解决方案2】：

只需在输入中添加vertical-align。

检查：https://jsfiddle.net/ajo4boom/1/

【讨论】：

【解决方案3】：

您可以使用您的浏览器工具包或 mozilla 扩展程序：firebug，来帮助自己找到问题的根源。您会看到唯一的输入实际上是 17px 高度。在浏览器现实中，跨度是 19 像素高度。

因此，将跨度高度定义为 19px 也大致可行。

【讨论】：

【解决方案4】：

输入的许多本机属性将与跨度不同。首先，您可能还想规范化border、font-family、font-size、line-height 和padding。

要利用height 属性，请在两个元素上定义display: inline-block。此外，box-sizing: content-box 将确保它们具有相同的box-sizing，这意味着padding 和borders 的方式将影响它们的height 和width。

.one, .two, .in {
  box-sizing: content-box;
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
  display: inline-block;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 18px;
  padding: 2px;
}

<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

【讨论】：

【解决方案5】：

这是使用display: inline-block;、line-height 和vertical-align 的可能解决方案，但就像@Leeish 评论的那样：

高度很难输入，因为浏览器都喜欢这样做自己的东西

.cnt {
  margin: 5px;
}
label {
  display: inline-block;
}
input {
  padding: 0;
}
.one, .two, .in {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
  display: inline-block;
  line-height: 17px;
  vertical-align: top;
}

<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

【讨论】：