layui-input-block和layui-input-inline的区别

最新推荐文章于 2025-04-04 09:08:55 发布
最新推荐文章于 2025-04-04 09:08:55 发布
阅读量1.6w 收藏 7
点赞数 5
分类专栏： layui 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41535326/article/details/102885404
版权

一个是一个表单元素占一行，竖着，以例表的形式排列。
另一个允许，多个表单控件占一行，横着，一行可以放置多个表单元素。

LayUI(二)学习笔记
Mikasa的博客
03-19 978
前言 本章笔记中的表单,表格,layer浮层都为重点内容 一、内容介绍 1.表单form 在layui中,layui不仅仅为表单提供了一套内置的样式.也为表单提供了一系列的操作的方法. 1）样式 class=“layui-form” 表示该容器使用表单的样式.该样式,是表单中具体样式的基础. class=“layui-form-item” : 表示表单中的具体项 class=“layu...
layUi框架入门篇（二）
BestRiven的博客
09-03 1万+
快速使用layUi前面提到过先引入js和CSS文件，然后如何使用呢？今天来慢慢拆解其中的代码。首先引入资源：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>layUi组件测试</title> <script type="text/javascript" src="./layui/layui.js">
layui 长度校验、必填 备忘
最新发布
weixin_38360069的博客
04-04 244
input type="text" id="Code" name="Code" autocomplete="off" lay-verify="maxlength_Code" data-maxlength="20" placeholder="请输入" class="layui-input">return '编码最大字符长度不能超过'+maxlength;placeholder="请输入" class="layui-input">">编码</label>layui 长度校验。
layui水平排版问题：“layui-input-inline“
smxdgf的博客
12-19 1569
layui水平排版折腾了不少时间，怎么都排不好，感觉还是对layui-input-inline的理解不到位，后来参考了《layui 水平排版妙招：对"layui-input-inline"的理解与layui的input独占一行问题的解决》才得以解决。网址如下： [2]: ...
Layui框架表单布局【每行一个，两个，三个input输入框】教程
yu980219的博客
09-02 1万+
这里写自定义目录标题欢迎使用Mar# 系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Mar# 系列文章目录 提示：这里可以添加系列文章
layui 页面控件
_binlong的博客
11-17 2701
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
layui-input-inline和layui-input-block的区别
05-05
`layui-input-inline` 和 `layui-input-block` 是两个不同的样式类，用于设置表单元素的显示方式。 `layui-input-inline` 用于将表单元素以行内方式（inline-block）展示，即表单元素之间不会换行，而是在同一行内...
解决layui的input独占一行的问题
10-16
我们可以将input元素和button元素分别放置在不同的div中，并给这些div设置layui-inline类。这样，即便input默认是块级元素，加上layui-inline类后，它们也可以在一行内显示。若想让多个input同行显示，则可以将这些...
<form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">模具id</label> <div class="layui-input-inline"> <input type="text" name="modelId" placeholder="" class="layui-input"> </div> <label class="layui-form-label">模具型号</label> <div class="layui-input-inline"> <input type="text" name="modelMold" placeholder="" class="layui-input"> </div> <label class="layui-form-label">模具类型</label> <div class="layui-input-inline"> <select name="modelType" id="modelType" placeholder=""> <option value=""></option> </select> </div> <div class="layui-form-item"> <label class="layui-form-label">状态</label> <div class="layui-input-inline" id="status" name="status"> <input type="radio" name="status" value="1" title="已归还" > <input type="radio" name="status" value="0" title="未归还" checked> </div> </div> <button id="inout-query" class="pear-btn pear-btn-md pear-btn-primary" lay-submit="" lay-filter="inout-query"> <i class="layui-icon layui-icon-search"></i> 查询 </button> <button type="reset" class="pear-btn pear-btn-md"> <i class="layui-icon layui-icon-refresh"></i> 重置 </button> </div> </form> 我想要水平布局
03-18
同时，输入块.layui-input-block需要设置合适的宽度，可能用flex布局或者百分比宽度。 另外，引用[2]提到水平排版常用于顶部搜索栏，这时候可能需要将多个表单项放在同一行。可能需要使用行内表单，即给表单添加...
layui实现input框添加tag
04-24
display: inline-block; padding: 2px 6px; margin-right: 5px; margin-bottom: 5px; border-radius: 4px; background-color: #e6e6e6; color: #333; cursor: default; } .tag:hover { background-color: ...
``` <div class="layui-tab-content" style="height: 80%; background-color: white; border-end-end-radius: 5px; border-end-start-radius: 5px;"> <div class="layui-tab-item layui-show" style="margin-top: 20px; margin-left: 30px;"> <form class="layui-form" action=""> <div class="layui-form-item"> <label i18n-t="login_id" class="layui-form-label" style="font-weight: bold">登录名</label> <div class="layui-input-inline" style="width: 260px;"> <input type="text" id="LoginID" name="LoginID" required lay-verify="required" i18n-p="a_lgonid" placeholder="请输入账号" autocomplete="off" class="layui-input" lay-vertype="tips"> </div> </div> <div class="layui-form-item"> <label i18n-t="password" class="layui-form-label" style="font-weight: bold">密码</label> <div class="layui-input-inline" style="width: 260px;"> <input type="password" id="Password" name="Password" i18n-p="a_password" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-vertype="tips"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <div class="layui-btn-group"> <button i18n-t="login"id="Login" class="layui-btn " lay-submit lay-filter="Login">登录</button> </div><div class="layui-btn-group"> <a i18n-t="quice_login" class="layui-btn " href="javascript:QuiceLogin();" lg="Quick Login|快速登录">快速登录</a> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> </label> <div class="layui-input-inline"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block" lg="Please log in using your Windows account and password.|请使用您的工号和密码登录。"> 请使用您的工号和密码登录。 </div> </div> </form> </div> </div>```在这个前端代码上面加上显示当前电脑的实时时间和年月日，并且可以实时显示，如何修改
03-20
<div class="layui-input-block" lg="Please log in using your Windows account and password.|请使用您的工号和密码登录。"> 请使用您的工号和密码登录。 // 获取时间容器元素 const ...
layui 水平排版妙招：对"layui-input-inline"的理解与layui的input独占一行问题的解决
热门推荐
sinat_25311845的博客
01-29 3万+
开发过程中，遇到layui水平排版问题，调整width，设置position依然不成功，问题如下： 原始代码如下： 修改后，界面显示如下： 在div id="selectday" 添加class="layui-input-inline"，代码如下： 可以总结出 "layui-input-inline"的意思是对于母div的子元素进行水平排列   ，第一层是对于母 &lt;d...
layui UI前端 输入框的基本属性
weixin_44570988的博客
09-09 4383
layui的呈现最终在于对form模块的自动渲染，下面描述是基本的结构 <div class="layui-form-item"> <label class="layui-form-label">文字内容</label> <div class="layui-input-block"> 表单元素 </div> </div> 如果不喜欢layui定义的结构，可以进行修改，但是一定要在外层容器中定义class=“lay
layui 表单动态添加、删除input框
Gblfy_Blog
08-01 4295
html部分 <div class="layui-form-item" > <label class="layui-form-label">路线</label> <div class="layui-input-block" id="last"> <div class="layui-input-inline"> {empty name="$ways"} <div .
Layui笔记
科技向善
07-10 284
1、在表单中使用 class="layui-input-inline" 来缩短间隔，使得排版更好看。 而使用layui-inline可以使得div不换行 2、 class="layui-nav-img"适配导航栏图片布局
layui form 中input输入框长度的统一设置
男神的专栏
11-05 2489
form中使用class="layui-input-inline"就可轻松将元素都放到一行，但如果元素过多，就会自动换行。那就需要手动设置input框的长度。因为layui.form中默认的样式就是用。去做选择器，我们需要做的就是覆盖掉这个样式。其实只需要添加css样式就可修改了。需要注意的是，样式里的。
layui框架学习（14：表单-上）
gc_2299的博客
03-18 1882
学习并记录layui框架中页面元素的表单的整体结构样式设置方式。
改变layui-input-inline宽度
qq_37344867的博客
01-20 3009
直接选中该类(.layui-input-inline)修改宽度，没有反应。 因为layui本身设置它的样式的时候是选中 .layui-form-item .layui-input-inline 的，它的优先级高于 .layui-input-inline，所以要修改样式应该： .layui-form-item .layui-input-inline { width: 300px; } ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值