位置:电子教程 > Flex Box语法教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex BOX概要入门
Flex Box容器的属性
Flex项目的属性
当前阅读教程:Flex Box语法教程 > 表单的简单布局
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Flex Box概要和入门 下一篇: Flex Box容器的属性

现在,加入两个最常用的表单控件。

<form>
  <input type="email" name="email">
  <button type="submit">Send</button>
</form>

上面代码中,表单包含一个输入框(<input>)和一个按钮(<button>)。

根据标准,这两个控件都是行内块级元素(inline-block),也就是说,它们默认并排在一行上。

image.png

上图是浏览器对这个表单的默认渲染(颜色除外),可以看到,这两个控件之间有3像素~4像素的间隔,这是浏览器的内置样式指定的。

       实战效果图

小白教程网www.2d5.net

image.png

代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1.2-Flex实战-表单的简单布局</title>
<style>
</style>
 
</head>
<body>
<form>
 
<div>
    <input type="email" name="email" />
    <button type="submit">发送</button>
</div><hr>
 
 
<style>
.myflex{ display:flex;}
</style>
<div>
    <input type="email" name="email" />
    <button type="submit">发送</button>
</div><hr>
 
 
<style>
.myflex2{ display:flex;}
.myinput{flex-grow:1;}
</style>
<div>
    <input type="email" name="email" />
    <button type="submit">发送</button>
</div><hr>
 
<div>
    <input type="email" name="email" />
    <button type="submit"><img src="1.png"></button>
</div><hr>
 
<style>
.myflex3{ display:flex;}
</style>
<div>
    <input type="email" name="email" />
    <button type="submit"><img src="1.png"></button>
</div><hr>
 
</form>
 
</body>
</html>



上一篇: Flex Box概要和入门 下一篇: Flex Box容器的属性
毕业设计网             广告联系QQ:45157718(微信同号)