这是官网上给出的例子
看起来还可以,其实实际上运行的话,选择框的长度是直接拉满的,很影响美观,如下图
代码如下
<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>