一、概述
layui是一款轻量级前端UI框架，为了让前端工程师更快速便捷地开发网页而生，其中的input-inline是其中的一款常用组件。input-inline组件是一个行内块级元素，可用于将表单内的多个输入框放置在同一行进行展示。在实际项目开发中，input-inline组件常用于一些表单数据的输入或展示，如导航栏、用户个人信息编辑等等。
二、用法及属性
input-inline组件的使用非常简单，只需要在表单输入框的父元素中使用class=”layui-input-inline”即可。除此之外，input-inline组件还有以下的属性：
1. style
style属性用于控制input-inline组件的样式，可以设置其宽度、高度、背景色等。例如：
<div class="layui-input-inline" style="width: 50%;">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
2. id
id属性用于设置input-inline组件的id，可用于JS操作。例如：
<div id="myDiv" class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
3. lay-style
lay-style属性用于设置input-inline组件的风格，包括：primary、danger、normal、warm四种风格。例如：
<div class="layui-input-inline" lay-style="primary">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
三、实例
下面是一些input-inline组件的实例展示。
1. 两个输入框在同一行
<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
原创文章，作者：AXUML，如若转载，请注明出处：https://www.506064.com/n/369087.html
微信扫一扫 
支付宝扫一扫 