位置:电子教程 > Flex Box实战教程 (如果看不到内容请使用360浏览器) 推荐学习资源
网页布局实战
九宫格实战
当前阅读教程:Flex Box实战教程 > 输入框的布局
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 圣杯布局 下一篇: 悬挂式布局

我们常常需要在输入框的前方添加提示,后方添加按钮。


1582775789300185.png

HTML代码如下

<div>
  <span>...</span>
  <input>
  <button>...</button>
</div>


CSS代码如下

.InputAddOn {
  display: flex;
}
 
.InputAddOn-field {
  flex: 1;
}





实战案例2:

1582775834978061.png

完整代码

<!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>


上一篇: 圣杯布局 下一篇: 悬挂式布局
毕业设计网             广告联系QQ:45157718(微信同号)