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