如何正确对齐跨度和输入元素? [英] 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;
}
这篇关于如何正确对齐跨度和输入元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文