Question

我想对齐<span>元素和<input>文本元素。 <input>和<span>的高度应相同，顶部和底部边框应位于同一行，<input>和<span>元素内的文字应位于同一行。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

https://jsfiddle.net/ajo4boom/

如何做我想做的事？

Answer 1

我通过使用normalize.css等外部样式表找到了成功。它们非常有用，可确保您的代码在所有浏览器中保持一致。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

通过添加

简单地抵消<input>

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

More info on relative positioning in CSS.

Answer 2

只需将vertical-align添加到输入中。

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

Answer 3

您可以使用浏览器工具包或mozilla扩展名：firebug来帮助自己找到问题的根源。你会看到只有输入真的是17px高度。在浏览器中，Spans的高度为19px。

因此，将跨度高度定义为19px也会很有效。

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

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

如何正确对齐量程和输入元素？

5 个答案: