1. 程式人生 > 其它 >layui表單中的inline和block介紹

layui表單中的inline和block介紹

layui表單中的inline和block:

block:

block元素會獨自佔一行,多個block元素各自新起一行,預設情況下 ,block元素寬度自動填充其父元素寬度

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

最終頁面顯示如下:

 

 兩個輸入框是單獨一行的。

inline:

inline元素不會獨自佔一行,多個相鄰元素會排在同一行中,直到一行排不下,才會新換一行,其寬度隨元素的內容而變化

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

 

 就是兩個輸入框都在同一行。