浅谈layui表单中的inline和block

本篇文章来给大家介绍一下layui表单中的inline和block。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

layui表单中的inline和block:

block:

block元素会独自占一行,多个block元素各自新起一行,默认情况下 ,block元素宽度自动填充其父元素宽度

<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="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证必填项</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required"
       lay-reqtext="用户名是必填项,岂能为空?" placeholder="请输入"
        autocomplete="off" class="layui-input">
    </div>
  </div>

上面这段代码中,用到了class="layui-input-block"

最终页面显示如下:

1.png

两个输入框是单独一行的。

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"

页面结果是这样的:

2.png

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

更多前端开发知识,请查阅 HTML中文网 !!

以上就是浅谈layui表单中的inline和block的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Layui 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏