layui-inline的作用有哪些

小编给大家分享一下layui-inline的作用有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联成都网站建设按需策划，是成都网站建设公司,为木包装箱提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站建设热线：18982081108

layui-inline是指layui表单中的inline元素，其作用就是使多个元素排成一行；inline元素不会独自占一行，多个相邻元素会排在同一行中，直到一行排不下，才会新换一行，并且其宽度随元素的内容而变化。

layui表单中的inline

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"

页面结果是这样的：

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

以上是“layui-inline的作用有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网页标题：layui-inline的作用有哪些
标题网址：https://www.cdcxhl.com/article30/jcjcpo.html

成都网站建设公司_创新互联，为您提供定制网站、营销型网站建设、网页设计公司、手机网站建设、品牌网站设计、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联