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"
頁面結果是這樣的:
就是兩個輸入框都在同一行