平常我们经常用到的表单排版方式常见的有两种，layui文档中已经给出垂直的排版方式，我们做后台的时候也会用到水平排版方式,用于在页面的顶部进行搜索的时候用到。推荐：layui教程
下面我们来看一下水平+垂直表单列表实现：
一、水平排版
html:
<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>
公共css:(包括主题颜色修改)
.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;
}
水平css:
.mainTop .layui-form-label { width: auto; padding-right: 5px; }
.dateIcon { display: inline-block; background: url(images/dateIcon.png) no-repeat 210px center; }
效果展示:
二、垂直排版
html:
<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>
css:
.dotRed {
color: #ff3100;
}
.mt32{ margin-top:32px;}
.formList .layui-form-label { padding-right: 0; }
.formList .layui-input-block{ margin-left:100px;}
效果展示:
三、垂直排版---文字很多的时候
我之前在做垂直表单的时候遇到过左侧文字很多的时候会换行显示不美观,那咋办呢,下面是解决办法:
html:
<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>
css:
.layui-form-wd120 .layui-form-label{ width:120px;}
.layui-form-wd120 .layui-input-block{ margin-left:140px;}
效果展示:
如果觉得文字还要很多呢,继续同样的办法:
html:
<div> <form> <div> <label>启用上传商品自动生成相册图<em>*</em>：</label> <div> <input> <span>启用后以商品原图无压缩上传，原图文件较大，会影响网页图片打开速度。</span> </div> </div> <div> <label>启用上传商品保留原图<em>*</em>：</label> <div> <input> </div> </div> </form> </div>
css:
.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;}
效果展示:
最终演示效果展示:http://www.jianbaizhan.com/upload/file/20181204/5c06280599c0d/form.html
