layui-inline的作用有哪些

小編給大家分享一下layui-inline的作用有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

layui-inline是指layui表單中的inline元素，其作用就是使多個(gè)元素排成一行；inline元素不會獨(dú)自占一行，多個(gè)相鄰元素會排在同一行中，直到一行排不下，才會新?lián)Q一行，并且其寬度隨元素的內(nèi)容而變化。

layui表單中的inline

inline：

inline元素不會獨(dú)自占一行，多個(gè)相鄰元素會排在同一行中，直到一行排不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化

<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">驗(yàn)證手機(jī)</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">驗(yàn)證郵箱</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"

頁面結(jié)果是這樣的：

就是兩個(gè)輸入框都在同一行。

以上是“l(fā)ayui-inline的作用有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！