layui基础表单布局

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