Introduction to inline and block in layui form-Layui Tutorial-php.cn

Introduction to inline and block in layui form

尚

Release： 2020-01-04 17:10:41

forward

7315 people have browsed it

Introduction to inline and block in layui form

Inline and block in layui form:

block:

block elements will be alone Occupy one line, multiple block elements each start a new line. By default, the width of the block element automatically fills the width of its parent element

<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>

Copy after login

In the above code, class="layui-input-block"# is used

##The final page is displayed as follows:

The two input boxes are on a separate line. Introduction to inline and block in layui form

#inline:

Inline elements will not occupy a line by themselves. Multiple adjacent elements will be arranged in the same line. Until one line cannot fit, a new line will be added. , its width changes with the content of the element

<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>

Copy after login

The one used above is class="layui-input-inline"

The page result is like this:

That is, both input boxes are on the same line. Introduction to inline and block in layui form

For more layui knowledge, please pay attention to the

layui usage tutorial column on the PHP Chinese website.

The above is the detailed content of Introduction to inline and block in layui form. For more information, please follow other related articles on the PHP Chinese website!