layui中常见的表单排版有哪些

layui中常见的表单排版有哪些？可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联建站专注骨干网络服务器租用10年，服务更有保障！服务器租用，服务器托管 成都服务器租用，成都服务器托管，骨干网络带宽，享受低延迟，高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

前言：

layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

layui 提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，其中包括:layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。

平常我们经常用到的表单排版方式常见的有两种，layui文档中已经给出垂直的排版方式，我们做后台的时候也会用到水平排版方式,用于在页面的顶部进行搜索的时候用到。

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

一、垂直排版

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

效果展示:

三、水平排版

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

效果展示:

看完上述内容，你们对layui中常见的表单排版有进一步的了解吗？如果还想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读。