当前阅读教程:Flex Box语法教程 > 表单的简单布局 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Flex Box概要和入门 | 下一篇: Flex Box容器的属性 |
现在,加入两个最常用的表单控件。 <form> <input type="email" name="email"> <button type="submit">Send</button> </form> 上面代码中,表单包含一个输入框(<input>)和一个按钮(<button>)。 根据标准,这两个控件都是行内块级元素(inline-block),也就是说,它们默认并排在一行上。 上图是浏览器对这个表单的默认渲染(颜色除外),可以看到,这两个控件之间有3像素~4像素的间隔,这是浏览器的内置样式指定的。 实战效果图 代码 <!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容器的属性 |