Home > Web Front-end > Layui Tutorial > What is the role of layui-inline

What is the role of layui-inline

藏色散人
Release: 2023-01-13 00:40:16
Original
7504 people have browsed it

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.

What is the role of layui-inline

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>
Copy after login

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

The page result is like this:

What is the role of layui-inline

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template