layui表单的inline元素和block元素介绍-创新互联

layui表单中的inline和block：

目前成都创新互联公司已为超过千家的企业提供了网站建设、域名、网站空间、绵阳服务器托管、企业网站设计、柳南网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

block：

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

<div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证必填项</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>

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

最终页面显示如下：

layui表单的inline元素和block元素介绍两个输入框是单独一行的。

inline：

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

<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证手机</label>
      <div class="layui-input-inline">
        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

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

页面结果是这样的：

layui表单的inline元素和block元素介绍就是两个输入框都在同一行。