Introduction à l'inline et au bloc sous forme layui-Tutoriel Layui-php.cn

Introduction à l'inline et au bloc sous forme layui

尚

Libérer： 2020-01-04 17:10:41

avant

7315 Les gens l'ont consulté

Introduction à l'inline et au bloc sous forme layui

en ligne et bloc sous forme layui :

bloc :

l'élément de bloc sera seul Occupant une ligne, plusieurs éléments block commencent chacun une nouvelle ligne. Par défaut, la largeur de l'élément block remplit automatiquement la largeur de son élément parent

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

Copier après la connexion

Dans le code ci-dessus, class="layui-input-block. "

La page finale s'affiche comme suit :

Introduction à linline et au bloc sous forme layui Les deux zones de saisie sont sur une ligne distincte.

en ligne :

Les éléments en ligne n'occuperont pas une ligne par eux-mêmes. Plusieurs éléments adjacents seront disposés dans la même ligne jusqu'à ce qu'une ligne ne puisse pas tenir, une nouvelle ligne. sera ajouté, sa largeur change avec le contenu de l'élément

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

Copier après la connexion

Celui utilisé ci-dessus est class="layui-input-inline"

Le résultat de la page est comme ceci :

Introduction à linline et au bloc sous forme layui C'est-à-dire que les deux zones de saisie sont sur la même ligne.