当前阅读教程:Flex Box实战教程 > 输入框的布局 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 圣杯布局 | 下一篇: 悬挂式布局 |
我们常常需要在输入框的前方添加提示,后方添加按钮。 HTML代码如下 <div> <span>...</span> <input> <button>...</button> </div> CSS代码如下 .InputAddOn { display: flex; } .InputAddOn-field { flex: 1; } 实战案例2: 完整代码 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>输入框的布局</title> </head> <body> 输入框的前方添加提示,后方添加按钮或者文字<hr> <style> .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;} </style> <div> <p> <label>用户名</label><input type="text" name="yhm" /> </p> <p> <label>密码</label><input type="text" name="mima" /> </p> </div> <style> .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;} </style> <div> <div> <img src="1.png"><input type="text"><button>提交</button> </div> <div> <img src="1.png"><input type="text"><button>提交</button> </div> </div> </body> </html> |
|
上一篇: 圣杯布局 | 下一篇: 悬挂式布局 |