flex 输入框布局
程序员文章站
2023-10-28 17:15:58
1：创建一个弹性容器(display:flex) 2：构建2个或3个弹性项目. 3：把弹性项目设置为居中对齐.(align-items:center) 4：改变input自身对齐方式，把它设置为拉伸以适应容器（align-self:stretch）。 实例： ......
1：创建一个弹性容器(display:flex)
2：构建2个或3个弹性项目.
3：把弹性项目设置为居中对齐.(align-items:center)
4：改变input自身对齐方式，把它设置为拉伸以适应容器（align-self:stretch）。
实例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flex输入框布局</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="items-1">
<label class="name">搜索</label>
<input class="ipt" type="text">
<button class="btn">go</button>
</div>
<div class="items-1">
<label class="name">联系电话</label>
<input class="ipt" type="text">
</div>
</div>
</body>
</html>
.main{
max-width: 350px;
margin: 100px auto;
font-size: 14px;
}
.items-1{
display: flex;
flex-direction: row;
background: #eee;
border: 1px #ccc solid;
align-items: center;
height: 32px;
margin-top: 10px;
}
.items-1 .ipt{
flex: 1;
border: 0px;
align-self: stretch;
padding: 0 4px;
}
.items-1 .name{
padding: 0 8px;
}
.items-1 .btn{
border: 0px;
padding: 0 10px;
}