layui框架中常見表單排版有哪些

這篇文章將為大家詳細講解有關layui框架中常見表單排版有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、水平排版

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">狀態：</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">暫時</option>                            </select>                        </div>                    </div>                    <div class="layui-inline">                        <label class="layui-form-label">創建時間：</label>                        <div class="layui-input-inline">                            <input type="text" class="layui-input dateIcon" id="dateTime" placeholder="請選擇時間范圍"                                   style="width: 240px;">                        </div>                    </div>                    <div class="layui-inline">                        <div class="layui-input-inline">                            <input type="text" placeholder="請輸入標題" 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;}/*修改顏色風格-藍色 */.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="請輸入昵稱" 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="請輸入郵箱" 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="寫作" lay-skin="primary" checked>                <input type="checkbox" name="" title="發呆" 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="睡覺" lay-skin="primary">                <input type="checkbox" name="" title="畫畫" 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">狀態：</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">個人簽名：</label>            <div class="layui-input-block">                <textarea 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;}

三、垂直排版---文字很多的時候

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

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="請輸入瀏覽器名稱" class="layui-input" style="width: 480px;">            </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>    </form></div>

css:

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

如果覺得文字還要很多呢,繼續同樣的辦法:

html:

<div class="formList">    <form class="layui-form layui-form-wd210" action="">        <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>                <span class="error-tips">啟用后以商品原圖無壓縮上傳，原圖文件較大，會影響網頁圖片打開速度。</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;}

關于“layui框架中常見表單排版有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。