layui form表单 调整 label 宽度

html 复制代码
这个可以调整所有label
.layui-form-label {
    width: 120px !important;
}
.layui-input-block {
    margin-left: 150px !important;
}

情况是这样的,表单里有多个输入框,只有个别label 是长的,我就想调整一下个别长的,其它不变

html 复制代码
<div class="layui-form-item">
    <label class="layui-form-label">
        是否分标分量:
    </label>
    <div class="layui-input-block">
        <input type="text" autocomplete="off" class="layui-input">
    </div>
</div>

class="layui-input-block" 改成 style="margin-left: 112px"

margin-left 是label 的宽度。

html 复制代码
.custom-label {
    float: left;
    white-space: nowrap; /*禁止换行*/
}

<div class="layui-col-md3">
    <div class="layui-form-item">
        <label class="layui-form-label custom-label">
            是否分标分量:
        </label>
        <div style="margin-left: 112px">
            <input type="text" autocomplete="off" class="layui-input">
        </div>
    </div>
</div>
相关推荐
Mintopia2 分钟前
JavaScript 中的计算机图形学核心知识点详解
前端·javascript·计算机图形学
BillKu6 分钟前
vue3中nextTick的作用及示例
javascript·vue.js·ecmascript
恋猫de小郭8 分钟前
Flutter 在 Dart 3.8 开始支持 Null-Aware Elements 语法,自动识别集合里的空元素
android·前端·flutter
智绘前端8 分钟前
Nuxt3中使用UnoCSS指南
前端·chrome
john_Asura9 分钟前
Vue3 自定义指令完全指南
前端·javascript·vue.js·npm·html
墨渊君12 分钟前
还原 Mac Dock 栏动效: 一步步打造流畅的波形缩放动画
前端·css·react.js
凌览17 分钟前
4.4K Star 的 chrome-remote-interface 竟有这样的神功,不用写浏览器插件轻松搞定账号密码自动化填充
前端·后端·trae
独立开阀者_FwtCoder32 分钟前
用分层结构扩展你的 React 项目
前端·javascript·后端
独立开阀者_FwtCoder36 分钟前
AI 神器!一键把 Vue3 源码解析成文档!
前端·javascript·vue.js
观默38 分钟前
90分钟从想法到发布,我是这样做的
前端·ai编程