layui框架中常见表单排版：水平+垂直排版

2022-05-08 07:01| 来源: 网络整理| 查看: 265

平常我们经常用到的表单排版方式常见的有两种，layui文档中已经给出垂直的排版方式，来源：https://www.layui.com/doc/element/form.html。我们做后台的时候也会用到水平排版方式,用于在页面的顶部进行搜索的时候用到。

下面我们来看一下水平+垂直表单列表实现：

1.jpg-600

一、水平排版

html:

新增商品状态：启用禁用暂时创建时间：搜索

公共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-600) no-repeat 210px center; }

效果展示:

2.jpg-600

二、垂直排版

html:

昵称*：邮箱*：性别：兴趣：城市*：北京上海广州深圳杭州状态：个人签名：

css:

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

效果展示:

3.jpg-600

三、垂直排版---文字很多的时候

我之前在做垂直表单的时候遇到过左侧文字很多的时候会换行显示不美观,那咋办呢,下面是解决办法:

html:

浏览器名称*：商店详细地址*：北京上海广州深圳杭州

css:

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

效果展示:

4.jpg-600

如果觉得文字还要很多呢,继续同样的办法:

html:

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

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;}

效果展示:

5.jpg-600

最终演示效果展示:http://www.jianbaizhan.com/upload/file/20181204/5c06280599c0d/form.html

本文转载自：https://fly.layui.com/jie/45407/

更多web前端开发知识，请查阅 HTML中文网！！

以上就是layui框架中常见表单排版：水平+垂直排版的详细内容，更多请关注html中文网其它相关文章！

【本文地址】

公司简介

联系我们