我们做后台的时候也会用到水平排版方式， 平常我们经常用到的表单排版方式常见的有两种。

下面是解决办法: html: div class=formListform class=layui-form layui-form-wd120 action=div class=layui-form-itemlabel class=layui-form-label浏览器名称em class=dotRed*/em：/labeldiv class=layui-input-blockinput type=text placeholder=请输入浏览器名称 class=layui-input style=width: 480px;/div/divdiv class=layui-form-itemlabel class=layui-form-label商店详细地址em class=dotRed*/em：/labeldiv class=layui-input-blockselect name=city lay-verify=required class=select_wd320option value=/optionoption value=0北京/optionoption value=1上海/optionoption value=2广州/optionoption value=3深圳/optionoption value=4杭州/option/select/div/div/form/div css: .layui-form-wd120 .layui-form-label{ width:120px;}.layui-form-wd120 .layui-input-block{ margin-left:140px;} 效果展示: 如果觉得文字还要很多呢，推荐： layui教程 下面我们来看一下水平+垂直表单列表实现： 一、水平排版 html: div class=mainTop layui-cleardiv class=flbutton type=button class=layui-btn layui-btn-blue新增商品/button/divdiv class=frform class=layui-form action=div class=layui-form-itemdiv class=layui-inlinelabel class=layui-form-label状态：/labeldiv class=layui-input-inlineselect name=city lay-verify=required class=select_wd120option value=/optionoption value=0启用/optionoption value=1禁用/optionoption value=2暂时/option/select/div/divdiv class=layui-inlinelabel class=layui-form-label创建时间：/labeldiv class=layui-input-inlineinput type=text class=layui-input dateIcon id=dateTime placeholder=请选择时间范围style=width: 240px;/div/divdiv class=layui-inlinediv class=layui-input-inlineinput type=text placeholder=请输入标题 class=layui-input style=width: 240px;/divdiv class=layui-input-inlinebutton type=button class=layui-btn layui-btn-blue搜索/button/div/div/div/form/div/div 公共css:(包括主题颜色修改) .fl { float: left; }.fr { float: right; }.mb10{ margin-bottom:10px;}.sideBlock { padding: 24px; }.layui-form-item .layui-input-inline { width: auto; }.layui-input。

继续同样的办法: html: div class=formListform class=layui-form layui-form-wd210 action=div class=layui-form-itemlabel class=layui-form-label启用上传商品自动生成相册图em class=dotRed*/em：/labeldiv class=layui-input-blockinput type=checkbox name=yyy lay-skin=switch lay-text=ON|OFF checkedspan class=error-tips启用后以商品原图无压缩上传， .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-radioi:hover。

.layui-form-radioedi {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: div class=formListform class=layui-form action=div class=layui-form-itemlabel class=layui-form-label昵称em class=dotRed*/em：/labeldiv class=layui-input-blockinput type=text placeholder=请输入昵称 class=layui-input style=width: 320px;/div/divdiv class=layui-form-itemlabel class=layui-form-label邮箱em class=dotRed*/em：/labeldiv class=layui-input-blockinput type=email placeholder=请输入邮箱 class=layui-input style=width: 320px;/div/divdiv class=layui-form-itemlabel class=layui-form-label性别：/labeldiv class=layui-input-blockinput type=radio name=sex value=保密 title=保密 checkedinput type=radio name=sex value=男 title=男input type=radio name=sex value=女 title=女/div/divdiv class=layui-form-itemlabel class=layui-form-label兴趣：/labeldiv class=layui-input-blockinput type=checkbox name= title=写作 lay-skin=primary checkedinput type=checkbox name= title=发呆 lay-skin=primaryinput type=checkbox name= title=唱歌 lay-skin=primaryinput type=checkbox name= title=跳舞 lay-skin=primary checkedinput type=checkbox name= title=睡觉 lay-skin=primaryinput type=checkbox name= title=画画 lay-skin=primary/div/divdiv class=layui-form-itemlabel class=layui-form-label城市em class=dotRed*/em：/labeldiv class=layui-input-blockselect name=city lay-verify=required class=select_wd320option value=/optionoption value=0北京/optionoption value=1上海/optionoption value=2广州/optionoption value=3深圳/optionoption value=4杭州/option/select/div/divdiv class=layui-form-itemlabel class=layui-form-label状态：/labeldiv class=layui-input-blockinput type=checkbox name=yyy lay-skin=switch lay-text=ON|OFF checked/div/divdiv class=layui-form-item layui-form-textlabel class=layui-form-label个人签名：/labeldiv class=layui-input-blocktextarea name=desc placeholder=请输入活动备注内容 class=layui-textarea/textarea/div/div/form/div css: .dotRed {color: #ff3100;}.mt32{ margin-top:32px;}.formList .layui-form-label { padding-right: 0; }.formList .layui-input-block{ margin-left:100px;} 效果展示: 三、垂直排版---文字很多的时候 我之前在做垂直表单的时候遇到过左侧文字很多的时候会换行显示不美观。

/span/div/divdiv class=layui-form-itemlabel class=layui-form-label启用上传商品保留原图em class=dotRed*/em：/labeldiv class=layui-input-blockinput type=checkbox name=yyy lay-skin=switch lay-text=ON|OFF checked/div/div/form/div 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-select。

layui文档中已经给出垂直的排版方式，会影响网页图片打开速度，原图文件较大，用于在页面的顶部进行搜索的时候用到，那咋办呢，。