layui-inline的作用是什么


本文摘自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"

页面结果是这样的:

7b05965977f33d430c43648e6ccb298.png

就是两个输入框都在同一行。

推荐(免费):layui教程

以上就是layui-inline的作用是什么的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

layui框架常用输入框介绍

layui如何刷新当前tab选项卡

layer和layui区别

layui项目中使用函数layui.define的方法介绍

对于layui框架源码兼容性微调介绍

layui的laydate组件中添加设置一周开始的方法

layui.laypage怎么用

layui的本地存储方法介绍

layui自定义字体图标图文教程

layui框架form表单使用介绍

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...