flex html文本框,Flex Box页面布局实战课程-输入框的布局

输入框的布局

输入框的前方添加提示，后方添加按钮或者文字

---

.rongqi01{ display:flex;}

.xiangmu01{ background-color:#CCC; margin:5px; display:flex; width:100%;}

.xiangmu01 input{ flex:1;}

.xiangmu02{ background-color:#CCC; margin:5px; display:flex; width:100%;}

.xiangmu02 input {flex:1;}

用户名

密码

.c01{ display:flex; width:100%; margin:10px;}

.c01-b{flex:1; border: 1px solid #CCC;border-right: none; border-left:none;}

.c01 button{ border: 1px solid #CCC;}

.c01-a{ border:1px solid #CCC; border-top-left-radius:5px; border-bottom-left-radius:5px;}

.c01-c{ border-top-right-radius:5px; border-bottom-right-radius:5px;}

提交

提交