flex+grid简单的搜索表单布局

作者：Jasmine - 2020年09月10日

表单布局

效果如上所示,比较简单的左右布局,输入框在左,按钮在右,常用于网站搜索框.

全局代码:

<form>
	<input type="text" placeholder="Enter your email" />
	<button type="button" class="btn" >
		<img src="img/quit-ico.png">
	</button>
</form>

form{
	width: 1000px;
	margin: 20px auto;
	background: #00ACEE;
	padding: 24px;
}
input{
	background: #fff;
	padding: 0 10px;
	border: none;
}
button{
	border: none;
	background: #00FFFF;
	color: #333;
	font-size: 14px;
	/* height: 40px; */
	/* line-height: 40px; */
	padding: 0 16px;
}

1.flex布局

form{
    display: flex;
}
input{
    flex: 1;
}

2.grid布局

form{
    display: grid;
    grid-template-columns: 1fr auto;
}

grid布局写法比较简单,只需要给form设置grid网格布局,设置列方向的大小为1fr auto就行.

参考来源:http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/689

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！