如何正确对齐跨度和输入元素? [英] How to properly align the span and input elements?

问题描述

我想对齐< span> 元素和< input> 文本元素.< input> 和&span> 的高度应相同，顶部和底部边框应在同一行上，并且< input> 和&span> 元素应位于同一行.

I want to align a <span> element and the <input> text element. The height of <input> and <span> should be the same, the top and bottom border should be on same line and the text inside the <input> and <span> elements should be on the same line.

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

该怎么办?

推荐答案

我已经通过使用外部样式表(例如 normalize.css .它们对于确保您的代码在所有浏览器中保持一致非常有用.

I've found success by using an external stylesheet such as normalize.css. They're very useful for making sure your tags stay aligned across all browsers.

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

.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 {
    position: relative;
    top: -1px;
}

有关CSS中相对位置的详细信息.

这篇关于如何正确对齐跨度和输入元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！