layui表单中的inline和block介绍-Layui教程-PHP中文网

layui表单中的inline和block介绍

尚

发布： 2020-01-04 17:10:41

转载

8116人浏览过

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"

最终页面显示如下：

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

inline：

简单三层购物网站源码

一、源码特点采用典型的三层架构进行开发，包含购物车、登陆注册、个人中心、留言板、新闻系统，前台页面、后台管理等二、功能介绍本源码是一个三层购物网站源码，功能齐全，界面美观简洁，非常适合二次开发和学习，欢迎下载三、菜单功能前台页面1、注册2、登陆3、首页4、购物车5、会员中心6、收藏家7、客服中心8、留言板后台管理1、管理员系统：管理员列表；管理员添加2、会员管理系统：会员列表3、新闻系统：新闻列表

查看详情

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"

页面结果是这样的：

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