?layui表單的inline元素和block元素介紹

layui表單中的inline和block：

block：

block元素會(huì)獨(dú)自占一行，多個(gè)block元素各自新起一行，默認(rèn)情況下 ，block元素寬度自動(dòng)填充其父元素寬度

<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="請(qǐng)輸入標(biāo)題" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">驗(yàn)證必填項(xiàng)</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" lay-reqtext="用戶名是必填項(xiàng)，豈能為空？" placeholder="請(qǐng)輸入" autocomplete="off" class="layui-input">
    </div>
  </div>

上面這段代碼中，用到了class="layui-input-block"

最終頁(yè)面顯示如下：

兩個(gè)輸入框是單獨(dú)一行的。

inline：

inline元素不會(huì)獨(dú)自占一行，多個(gè)相鄰元素會(huì)排在同一行中，直到一行排不下，才會(huì)新?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"

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

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

以上就是layui表單中的inline和block介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！