layui框架中常見(jiàn)表單排版有哪些

這篇文章將為大家詳細(xì)講解有關(guān)layui框架中常見(jiàn)表單排版有哪些，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、水平排版

html:

<div class="mainTop layui-clear">        <div class="fl">            <button type="button" class="layui-btn layui-btn-blue">新增商品</button>        </div>        <div class="fr">            <form class="layui-form" action="">                <div class="layui-form-item">                    <div class="layui-inline">                        <label class="layui-form-label">狀態(tài)：</label>                        <div class="layui-input-inline">                            <select name="city" lay-verify="required" class="select_wd120">                                <option value=""></option>                                <option value="0">啟用</option>                                <option value="1">禁用</option>                                <option value="2">暫時(shí)</option>                            </select>                        </div>                    </div>                    <div class="layui-inline">                        <label class="layui-form-label">創(chuàng)建時(shí)間：</label>                        <div class="layui-input-inline">                            <input type="text" class="layui-input dateIcon" id="dateTime" placeholder="請(qǐng)選擇時(shí)間范圍"                                   style="width: 240px;">                        </div>                    </div>                    <div class="layui-inline">                        <div class="layui-input-inline">                            <input type="text" placeholder="請(qǐng)輸入標(biāo)題" class="layui-input" style="width: 240px;">                        </div>                        <div class="layui-input-inline">                            <button 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, .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;}/*修改顏色風(fēng)格-藍(lán)色 */.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:

<div class="formList">    <form class="layui-form" action="">        <div class="layui-form-item">            <label class="layui-form-label">昵稱<em class="dotRed">*</em>：</label>            <div class="layui-input-block">                <input type="text" placeholder="請(qǐng)輸入昵稱" class="layui-input" style="width: 320px;">            </div>        </div>        <div class="layui-form-item">            <label class="layui-form-label">郵箱<em class="dotRed">*</em>：</label>            <div class="layui-input-block">                <input type="email" placeholder="請(qǐng)輸入郵箱" class="layui-input" style="width: 320px;">            </div>        </div>        <div class="layui-form-item">            <label class="layui-form-label">性別：</label>            <div class="layui-input-block">                <input type="radio" name="sex" value="保密" title="保密" checked>                <input type="radio" name="sex" value="男" title="男">                <input type="radio" name="sex" value="女" title="女">            </div>        </div>        <div class="layui-form-item">            <label class="layui-form-label">興趣：</label>            <div class="layui-input-block">                <input type="checkbox" name="" title="寫(xiě)作" lay-skin="primary" checked>                <input type="checkbox" name="" title="發(fā)呆" lay-skin="primary">                <input type="checkbox" name="" title="唱歌" lay-skin="primary">                <input type="checkbox" name="" title="跳舞" lay-skin="primary" checked>                <input type="checkbox" name="" title="睡覺(jué)" lay-skin="primary">                <input type="checkbox" name="" title="畫(huà)畫(huà)" lay-skin="primary">            </div>        </div>        <div class="layui-form-item">            <label class="layui-form-label">城市<em class="dotRed">*</em>：</label>            <div class="layui-input-block">                <select name="city" lay-verify="required" class="select_wd320">                    <option value=""></option>                    <option value="0">北京</option>                    <option value="1">上海</option>                    <option value="2">廣州</option>                    <option value="3">深圳</option>                    <option value="4">杭州</option>                </select>            </div>        </div>        <div class="layui-form-item">            <label class="layui-form-label">狀態(tài)：</label>            <div class="layui-input-block">                <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>            </div>        </div>        <div class="layui-form-item layui-form-text">            <label class="layui-form-label">個(gè)人簽名：</label>            <div class="layui-input-block">                <textarea name="desc" placeholder="請(qǐng)輸入活動(dòng)備注內(nèi)容" 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;}

三、垂直排版---文字很多的時(shí)候

我之前在做垂直表單的時(shí)候遇到過(guò)左側(cè)文字很多的時(shí)候會(huì)換行顯示不美觀,那咋辦呢,下面是解決辦法:

html:

<div class="formList">    <form class="layui-form layui-form-wd120" action="">        <div class="layui-form-item">            <label class="layui-form-label">瀏覽器名稱<em class="dotRed">*</em>：</label>            <div class="layui-input-block">                <input type="text" placeholder="請(qǐng)輸入瀏覽器名稱" class="layui-input" style="width: 480px;">            </div>        </div>        <div class="layui-form-item">            <label class="layui-form-label">商店詳細(xì)地址<em class="dotRed">*</em>：</label>            <div class="layui-input-block">                <select name="city" lay-verify="required" class="select_wd320">                    <option value=""></option>                    <option value="0">北京</option>                    <option value="1">上海</option>                    <option value="2">廣州</option>                    <option value="3">深圳</option>                    <option 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;}

如果覺(jué)得文字還要很多呢,繼續(xù)同樣的辦法:

html:

<div class="formList">    <form class="layui-form layui-form-wd210" action="">        <div class="layui-form-item">            <label class="layui-form-label">啟用上傳商品自動(dòng)生成相冊(cè)圖<em class="dotRed">*</em>：</label>            <div class="layui-input-block">                <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>                <span class="error-tips">啟用后以商品原圖無(wú)壓縮上傳，原圖文件較大，會(huì)影響網(wǎng)頁(yè)圖片打開(kāi)速度。</span>            </div>        </div>        <div class="layui-form-item">            <label class="layui-form-label">啟用上傳商品保留原圖<em class="dotRed">*</em>：</label>            <div class="layui-input-block">                <input 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;}

關(guān)于“l(fā)ayui框架中常見(jiàn)表單排版有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。