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

这篇文章将为大家详细讲解有关layui框架中常见表单排版有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一、水平排版

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

关于"layui框架中常见表单排版有哪些"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。