Lauiui 形式のインラインとブロックの紹介

layui 形式のインラインとブロック:

block:

block 要素は単独になります1 行を占め、複数のブロック要素はそれぞれ新しい行を開始します。デフォルトでは、ブロック要素の幅は親要素の幅を自動的に埋めます

<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 "# が使用されています

##最後のページは次のように表示されます:

2 つの入力ボックスは別の行にあります。

#inline:

インライン要素は、単独では 1 行を占有しません。複数の隣接する要素が同じ行に配置されます。1 行に収まりきらないまで、新しい要素が配置されます。行が追加されます。幅は要素の内容によって変わります。

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

ページの結果は次のようになります:

つまり、両方の入力ボックスが同じ行にあります。

layui の詳細については、PHP 中国語 Web サイトの

layui 使用法チュートリアル 列に注目してください。

以上がLauiui 形式のインラインとブロックの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。