layui框架中常见表单排版介绍

<div>        <div>            <button>新增商品</button>        </div>        <div>            <form>                <div>                    <div>                        <label>状态：</label>                        <div>                            <select>                                <option></option>                                <option>启用</option>                                <option>禁用</option>                                <option>暂时</option>                            </select>                        </div>                    </div>                    <div>                        <label>创建时间：</label>                        <div>                            <input>                        </div>                    </div>                    <div>                        <div>                            <input>                        </div>                        <div>                            <button>搜索</button>                        </div>                    </div>                </div>            </form>        </div>    </div>

.fl { float: left; }.fr { float: right; }.mb10{ margin-bottom:10px;}.sideBlock { padding: 24px; }.layui-form-item .layui-input-inline { width: auto; }.layui-input, .layui-select, .layui-textarea{ height:36px;}.layui-form-label {    padding: 8px 15px;}.layui-form-switch {    height: 34px;    line-height: 34px;    margin-top: 0;    min-width: 54px;}.layui-form-switch i {    width: 24px;    height: 24px;top: 5px;}.layui-form-onswitch i {    margin-left: -28px;    top: 5px;}.layui-form-switch em{margin-left: 27px;}.layui-form-onswitch em {    margin-left: 5px;}.layui-btn{ height:36px;}/*修改颜色风格-蓝色 */.layui-form-select dl dd.layui-this {    background-color: #02a7f0;}.layui-btn-blue { background-color: #02a7f0; }.layui-form-onswitch {    border-color: #02a7f0;    background-color: #02a7f0;}.layui-form-radio>i:hover, .layui-form-radioed>i {    color: #02a7f0;}.layui-form-checked[lay-skin=primary] i {    border-color: #02a7f0;    background-color: #02a7f0;}.layui-form-checkbox[lay-skin=primary]:hover i {    border-color: #02a7f0;}

.mainTop .layui-form-label { width: auto; padding-right: 5px; }.dateIcon { display: inline-block; background: url(images/dateIcon.png) no-repeat 210px center; }

<div>    <form>        <div>            <label>昵称<em>*</em>：</label>            <div>                <input>            </div>        </div>        <div>            <label>邮箱<em>*</em>：</label>            <div>                <input>            </div>        </div>        <div>            <label>性别：</label>            <div>                <input>                <input>                <input>            </div>        </div>        <div>            <label>兴趣：</label>            <div>                <input>                <input>                <input>                <input>                <input>                <input>            </div>        </div>        <div>            <label>城市<em>*</em>：</label>            <div>                <select>                    <option></option>                    <option>北京</option>                    <option>上海</option>                    <option>广州</option>                    <option>深圳</option>                    <option>杭州</option>                </select>            </div>        </div>        <div>            <label>状态：</label>            <div>                <input>            </div>        </div>        <div>            <label>个人签名：</label>            <div>                <textarea></textarea>            </div>        </div>    </form></div>

.dotRed {    color: #ff3100;}.mt32{ margin-top:32px;}.formList .layui-form-label { padding-right: 0; }.formList .layui-input-block{ margin-left:100px;}

<div>    <form>        <div>            <label>浏览器名称<em>*</em>：</label>            <div>                <input>            </div>        </div>        <div>            <label>商店详细地址<em>*</em>：</label>            <div>                <select>                    <option></option>                    <option>北京</option>                    <option>上海</option>                    <option>广州</option>                    <option>深圳</option>                    <option>杭州</option>                </select>            </div>        </div>    </form></div>

.layui-form-wd120 .layui-form-label{ width:120px;}.layui-form-wd120 .layui-input-block{ margin-left:140px;}

<div>    <form>        <div>            <label>启用上传商品自动生成相册图<em>*</em>：</label>            <div>                <input>                <span>启用后以商品原图无压缩上传，原图文件较大，会影响网页图片打开速度。</span>            </div>        </div>        <div>            <label>启用上传商品保留原图<em>*</em>：</label>            <div>                <input>            </div>        </div>    </form></div>

.layui-form-wd210 .layui-form-label{ width:210px;}.layui-form-wd210 .layui-input-block{ margin-left:230px;}.error-tips{ color: #ff3100; font-size:13px; padding-left:10px;}