What is the role of layui-inline

layui-inline refers to the inline element in the layui form. Its function is to line up multiple elements in a line; the inline element will not occupy a line by itself, and multiple adjacent elements will be placed in the same line until If a row cannot fit, a new row will be added, and its width will change with the content of the element.

The operating environment of this tutorial: windows7 system, layui2.5.6 version, DELL G3 computer.

inline# in the layui form

##inline:

The inline element will not occupy a line by itself. Multiple adjacent elements will be arranged in the same line. Until one line cannot fit, a new line will be added, and its width will vary. It changes depending on 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>

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.

Recommended (free):

layui tutorial

The above is the detailed content of What is the role of layui-inline. For more information, please follow other related articles on the PHP Chinese website!