本文摘自PHP中文网,作者尚,侵删。
layui表单中的inline和block:
block:
block元素会独自占一行,多个block元素各自新起一行,默认情况下 ,block元素宽度自动填充其父元素宽度
1 2 3 4 5 6 7 8 9 10 11 12 | <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元素不会独自占一行,多个相邻元素会排在同一行中,直到一行排不下,才会新换一行,其宽度随元素的内容而变化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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中文网layui使用教程栏目。
以上就是layui表单中的inline和block介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
layui怎么用open属性隐藏按钮
layui是什么?有什么作用?
layui关闭当前弹出框的方法
layui框架使用收费吗
一些layui底层方法介绍
使用layui框架封装ajax模块的具体步骤
layui table模块对表格数据处理后的排序问题
怎么利用layui美化table数据表格
layui怎么引用
jquery的easyui和layui区别是什么
更多相关阅读请进入《layui》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » layui表单中的inline和block介绍