本文摘自PHP中文网,作者藏色散人,侵删。
layui-inline是指layui表单中的inline元素,其作用就是使多个元素排成一行;inline元素不会独自占一行,多个相邻元素会排在同一行中,直到一行排不下,才会新换一行,并且其宽度随元素的内容而变化。

本教程操作环境:windows7系统、layui2.5.6版,DELL G3电脑.
layui表单中的inline
inline:
inline元素不会独自占一行,多个相邻元素会排在同一行中,直到一行排不下,才会新换一行,其宽度随元素的内容而变化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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教程
以上就是layui-inline的作用是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
layui框架常用输入框介绍
layui如何刷新当前tab选项卡
layer和layui区别
layui项目中使用函数layui.define的方法介绍
对于layui框架源码兼容性微调介绍
在layui的laydate组件中添加设置一周开始的方法
layui.laypage怎么用
layui的本地存储方法介绍
layui自定义字体图标图文教程
layui框架form表单使用介绍
更多相关阅读请进入《layui》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » layui-inline的作用是什么