Shulou(Shulou.com)06/03 Report--

This article will explain in detail about the common form typesetting in the layui framework. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

I. horizontal typesetting

Html:

New item status: enabled Disable temporary creation time: Search for

Public css: (including theme color modification)

.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: } .layui-form-switch I {width: 24px; height: 24pxscape 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;} / * modify color style-blue * / .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;}

Horizontal css:

.mainTop .layui-form-label {width: auto; padding-right: 5px;} .dateIcon {display: inline-block; background: url (images/dateIcon.png) no-repeat 210px center;}

2. Vertical typesetting

Html:

Nickname *: email *: gender: Interests: city *: Beijing, Shanghai, Guangzhou, Shenzhen, Hangzhou status: personal signature:

Css:

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

Third, vertical typesetting-when there are a lot of words

When I was doing a vertical form before, I encountered a lot of text on the left when the line was not beautiful. What should I do? here's the solution:

Html:

Browser name *: store address *: Beijing, Shanghai, Guangzhou Shenzhen Shenzhen and Hangzhou

Css:

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

If you think there are more words, continue to do the same:

Html:

Enable uploading products to automatically generate photo album images *: when enabled, upload the original image without compression, and the file of the original image is larger, which will affect the opening speed of web images. Enable uploading products to retain the original image *:

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 } about "what are the common form typesetting in the layui framework" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.