layui-下拉选择框

这是官网上给出的例子

看起来还可以，其实实际上运行的话，选择框的长度是直接拉满的，很影响美观，如下图

代码如下

<div class="layui-form-item"><label class="layui-form-label">选择框</label><div class="layui-input-block"><select name="city" lay-verify="required"><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>

经查看官网页面，这块的源代码

可以发现多了一行“layui-inline”,官网给出的解释如下

实现如下图：

 <div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">地址：</label><div class="layui-input-block"><select name="uaddress1" lay-verify="required"><option value="">请选择单元楼</option><option value="Building1">1号楼</option><option value="Building2">2号楼</option><option value="Building3">3号楼</option><option value="Building4">4号楼</option></select></div></div><div class="layui-inline"><select name="uaddress2" lay-verify="required"><option value="">请选择单元</option><option value="Unit1">1单元</option><option value="Unit2">2单元</option><option value="Unit3">3单元</option><option value="Unit4">4单元</option></select></div><div class="layui-inline"><select name="uaddress3" lay-verify="required"><option value="">请选择楼层</option><option value="floor1">1楼</option><option value="floor2">2楼</option><option value="floor3">3楼</option><option value="floor4">4楼</option><option value="floor5">5楼</option><option value="floor6">6楼</option></select></div><div class="layui-inline"><select name="uaddress4" lay-verify="required"><option value="">请选择房间</option><option value="Room1">1号房</option><option value="Room2">2号房</option></select></div></div>

layui-下拉选择框相关推荐

layui下拉选择框开启搜索功能后，文本框会将Nbsp显示出来的解决办法
layui下拉选择框直接在select标签添加lay-search,即可开启搜索功能 <select id="selectCategory" lay-filter=" ...
layui 下拉选择框可以选择但不显示数据值_你想做的quot;基因药物疾病quot;网络数据在这里！...
点击[医学方] 关注我们最近有师妹苦恼于某药物作用相关科研课题设计,不知道疾病研究方向,不想清楚应该选择哪些基因进行研究.于是我向她推荐了这个数据库,分分钟解决了她的难题. 无论你是想根据基因,想 ...
layui实现select下拉选择框组件（含代码、案例、截图）
layui实现select下拉选择框组件(含代码.案例.截图) 案例 · 效果图: 全部代码如下: <!DOCTYPE html> <html> <head>< ...
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
python select模块安装_python+selenium select下拉选择框定位处理方法
一.前言总结一下python+selenium select下拉选择框定位处理的两种方式,以备后续使用时查询: 二.直接定位(XPath) 使用Firebug找到需要定位到的元素,直接右键复制XPa ...
自定义组合控件：下拉选择框
Spinner 自定义组合控件之下拉选择框项目概述下拉选择框主要是通过在EditText 下用PopupWindow 动态显示ListView 控件来实现的.下拉选择框可以方便用户的输入效率,以此 ...
js下拉 selenium_selenium的下拉选择框
今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...
html下拉选择框箭头改为年,CSS自定义select下拉选择框的样式(不用其他标签模拟)...
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
UI标签库专题十一：JEECG智能开发平台 DictSelect (数据字典下拉选择框)
1. DictSelect (数据字典下拉选择框) 1.1. 参数属性名类型描述是否必须默认值 typeGroupCode string 字典分组编码是 null field str ...

layui-下拉选择框

layui-下拉选择框相关推荐

最新文章

热门文章