layui基础表单布局

44 篇文章 0 订阅
21 篇文章 0 订阅

 例子:四个一行(尽量使用layui-form-item,解决ie浏览器与谷歌文本框与下拉框长度不一致)

        <form id="searchForm" class="layui-form" action="">
            <div class="layui-form-item" style="margin: 0;padding: 0">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">登录账号:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="userName" name="userName" placeholder="请输入登录账号" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">用户状态:</label>
                    <div class="layui-input-inline">
                        <select id="userState" name="userState" lay-search>
                            <option value="">请选择</option>
                            <option value="0">正常</option>
                            <option value="1">冻结</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">用户登录状态:</label>
                    <div class="layui-input-inline">
                        <select id="loginState" name="loginState" lay-search>
                            <option value="">请选择</option>
                            <option value="0">未登录</option>
                            <option value="1">已登录</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">其他系统绑定登录名:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="otherSysName" name="otherSysName" placeholder="请输入其他系统绑定登录名"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin: 0;padding: 0">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">公司:</label>
                    <div class="layui-input-inline">
                        <select id="compInfoId" name="compInfoId" lay-search>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">部门:</label>
                    <div class="layui-input-inline">
                        <select id="deptId" name="deptId" lay-search>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">岗位:</label>
                    <div class="layui-input-inline">
                        <select id="postId" name="postId" lay-search>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">学历:</label>
                    <div class="layui-input-inline">
                        <select id="educId" name="educId" lay-search>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin: 0;padding: 0">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">职称:</label>
                    <div class="layui-input-inline">
                        <select id="jobTitleId" name="jobTitleId" lay-search>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">职务:</label>
                    <div class="layui-input-inline">
                        <select id="dutyId" name="dutyId" lay-search>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">工龄:</label>
                    <div class="layui-input-inline">
                        <select id="workingAgeId" name="workingAgeId" lay-search>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">档次信息:</label>
                    <div class="layui-input-inline">
                        <select id="gradeId" name="gradeId" lay-search>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin: 0;padding: 0">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 150px">Hr修改人员:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="userId_hr" name="userId_hr" placeholder="请输入Hr修改人员" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="float: right">
                    <div class="layui-input-inline" style="float: right">
                        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="form" type="submit">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
                        <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" onclick="addUserInfo()">新增用户
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

解决同一行label长度过长,文本框会网上偏移

            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">xxx:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="xxx" name="xxx" required lay-verify="required"
                               value="${xxx.xxx!}"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                    <label class="layui-form-label" style="width: 100px">xxx:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="xxx" name="xxx"
                               value="${xxx.xxx!}"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-hide">
                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit lay-filter="submit" id="submit">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

日期范围写法

                <div class="form-group">
                    <label>时间:</label>
                    <div class="control-inline">
                        <input id="date1" name="date1" value="" class="form-control width-90">
                    </div>
                    <div class="control-inline">
                        -
                    </div>
                    <div class="control-inline">
                        <input id="date2" name="date2" value="" class="form-control width-90">
                    </div>
                </div>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值