ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。