layui让文字和div平行_layui常见表单排版,水平+垂直排版

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

一.水平排版

新增商品

状态：

启用

禁用

暂时

创建时间：

style="width: 240px;">

搜索

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

效果:

够多了吧.是不是很神奇,很简单的,只需要收到修改一下css就能实现喔,快来试试吧.

如需转载请注明来源,这是原创,请尊重原创,发现好多网站抄袭本人文章,而没有注明的,本人将保留追究权利!!!