html form inline,浅谈layui表单中的inline和block

本篇文章来给大家介绍一下layui表单中的inline和block。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

layui表单中的inline和block：

block：

block元素会独自占一行，多个block元素各自新起一行，默认情况下 ，block元素宽度自动填充其父元素宽度

单行输入框

placeholder="请输入标题" class="layui-input">

验证必填项

lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入"

autocomplete="off" class="layui-input">

上面这段代码中，用到了class="layui-input-block"

最终页面显示如下：

两个输入框是单独一行的。

inline：

inline元素不会独自占一行，多个相邻元素会排在同一行中，直到一行排不下，才会新换一行，其宽度随元素的内容而变化

验证手机

class="layui-input">

验证邮箱

class="layui-input">

上面用到的是 class="layui-input-inline"

页面结果是这样的：

就是两个输入框都在同一行。

更多前端开发知识，请查阅 HTML中文网 ！！