<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>flex表单布局对比</title>
</head>
<body>
<div>
<p>没有flex布局按钮之间有间隙</p>
<input type="email" name="email" />
<button type="submit">发送</button>
</div>
<hr>
<style>
.myflex{display: flex;}
</style>
<p>有flex布局,按钮之间没有间隙</p>
<div class="myflex">
<input type="email" name="email" />
<button type="submit">发送</button>
</div>
<style>
.myflex2{display: flex;}
.myinput{flex-grow: 1;}
</style>
<p>有flex布局,并且制定缩放比例</p>
<div class="myflex2">
<input class="myinput" type="email" name="email" />
<button type="submit">发送</button>
</div>
<style>
.myflex3{display: flex;}
.myinput{flex-grow: 1;}
</style>
<p>有flex布局,并且制定缩放比例1:1</p>
<div class="myflex3">
<input class="myinput" type="email" name="email" />
<button class="myinput" type="submit">发送</button>
</div>
<style>
</style>
<p>没有flex布局,元素高度不一样</p>
<div>
<input type="email" name="email" />
<button type="submit">
<img src="1.png" />
</button>
</div>
<style>
.myflex4{display: flex;}
</style>
<p>有flex布局,元素高度一样,可以定义图标大小，左边的元素会自适应高度，并且紧贴一起</p>
<div class="myflex4">
<input type="email" name="email" />
<button type="submit">
<img src="1.png" />
</button>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
