这是我目前的工作:
<div id="main">
<form>
<label>First Name:<input type="text" id="firstname"></label><br/>
<label>Last Name:<input type="text" id="lastname"></label><br>
<label>E-Mail:<input type="text" id="email"></label><br/>
<label>Phone:<input type="text" id="phone"></label><br/>
</form>
</div>
CSS
#main {
width:300px;
}
#main input {
float:right;
display:inline;
}
#main label {
color: #2D2D2D;
font-size: 15px;
width:250px;
display: block;
}
目前,标签(左侧)有点靠近输入字段的顶部(右侧)。我想将它们垂直对齐,以便标签位于输入字段的中间。
我试过垂直对齐,但它不起作用。请帮我找出问题所在。谢谢。
最佳答案
我觉得嵌套<span>
添加了很多不必要的标记。
display: inline-block
让 <label>
和 <input>
坐在一起就像float: right
但不会中断文档流。此外,它更加灵活,如果您(或用户的屏幕阅读器)想要更改 font-size
,则可以更好地控制对齐方式。 .
编辑:jsfiddle
label, input {
display: inline-block;
vertical-align: baseline;
width: 125px;
}
label {
color: #2D2D2D;
font-size: 15px;
}
form, input {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
form {
width: 300px;
}
<form>
<label for="firstname">First Name:</label><input type="text" id="firstname">
<label for="lastname">Last Name:</label><input type="text" id="lastname">
<label for="email">E-Mail:</label><input type="text" id="email">
<label for="phone">Phone:</label><input type="text" id="phone">
</form>
关于html - 我希望我的标签与我的输入字段垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15193848/