项目中几乎都设计到表单这一功能,表单布局也是必不可少的一个话题,下面要实现的就是表单对齐排列布局
第一种实现方式:
<div id="form">
<div>
<label>姓名:</label>
<input type="text" value="" />
</div>
<div>
<label>出生地:</label>
<input type="text" value="" />
</div>
<div>
<label>出生年月:</label>
<input type="text" value="" />
</div>
</div>
#form div{
display: flex;
height: 50px;
align-items: flex-start;
}
#form div label{
flex:0 0 140px;
text-align: right;
}
第二种实现方式:
#form{
display: flex;
flex-direction: column;
}
#form div{
display: flex;
flex: 0 0 50px;
align-items: flex-start;
}
#form div label{
flex:0 0 140px;
text-align: right;
}