我想对齐一个<span>元素和<input>文本元素。高度为<input> and <span>应该是相同的，顶部和底部边框应该在同一行，并且文本内部<input> and <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/ https://jsfiddle.net/ajo4boom/
如何做我想做的事？
我通过使用外部样式表取得了成功，例如标准化.css https://necolas.github.io/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;
}
有关 CSS 中相对定位的更多信息。 https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
