<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 给外层div设置底部边框,div长度内容自适应 */
#div{
line-height:25px;
border:0;
border-bottom:1px solid #777777;
/* div内容自适应设置 */
display:inline-block;
*display:inline;
*zoom:1;
}
/* 清除input、span元素边框 */
span,input{
border:0;
}
/*给input和span设置行高,使底部边框在一条线上 */
span,input{
line-height:25px;
}
/* 给input设置行块,不然会换行 */
input{
display:inline-block;
width:50px;
text-align:center;
}
</style>
</head>
<body>
<div id="div">
<input type="text"><span>年</span><input type="text"><span>月</span><input type="text"><span>日</span>
</div>
</body>
</html>
0002天:学习打卡。
适用场景:合同、收据、文档等,可以修改内容,如果导出文档或内容填写完成只显示横线和内容。合同当中填写年月日这种格式比较常见。