layui基础表单布局

it2023-07-07  66

 例子:四个一行(尽量使用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>

 

最新回复(0)