首页

科技资讯

技术分享

程序开发

设备维修

登录

注册

• 首页
• 程序开发
• 正文

layui框架中常见表单排版有哪些

创始人

2024-12-17 07:41:48

0次

一、水平排版

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

二、垂直排版

html:

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

css:

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

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

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

html:

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

css:

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

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

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