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"

 

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