layui表单中的inline和block介绍

百变鹏仔 2个月前 (11-16) #layui

文章标签表单

layui表单中的inline和block：

block：

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

<div>    <label>单行输入框</label>    <div>      <input>    </div>  </div>  <div>    <label>验证必填项</label>    <div>      <input>    </div>  </div>

上面这段代码中，用到了

最终页面显示如下：

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

inline：

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

<div>    <div>      <label>验证手机</label>      <div>        <input>      </div>    </div>    <div>      <label>验证邮箱</label>      <div>        <input>      </div>    </div>  </div>

上面用到的是

页面结果是这样的：

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

更多layui知识请关注PHP中文网layui使用教程栏目。

文章推荐

layui表单中的inline和block介绍

layui的分页怎么用

layui怎么设置checkbox勾选

layui怎么对弹出层显示数据

layui表格怎么清空

layui有什么主要功能