html – 如何正确对齐span和input元素？

概述我想对齐< span>元素和< input>文本元素. < input>的高度和< span>应该是相同的,顶部和底部边框应该在同一行和< input>内的文本.和< span>元素应该在同一条线上. .cnt { margin: 5px;}.one { background-color: #ffffff; border: solid 1px #ADADAD; height: 我想对齐< 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 >  <label>    <span >Test in Span</span>    <span >Span in test</span>  </label>  <input  value="mmmnnnxx" type="text" /></div>

https://jsfiddle.net/ajo4boom/

怎么做我想要的？

解决方法 我通过使用外部样式表(例如 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 >  <label>    <span >Test in Span</span>    <span >Span in test</span>  </label>  <input  value="mmmnnnxx" type="text" /></div>

简单地偏移< input>通过增加

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

More info on relative positioning in CSS.

总结

以上是内存溢出为你收集整理的html – 如何正确对齐span和input元素？全部内容，希望文章能够帮你解决html – 如何正确对齐span和input元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。