天天看点

layui-下拉选择框

这是官网上给出的例子

layui-下拉选择框

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

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-下拉选择框
layui-下拉选择框

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

layui-下拉选择框

实现如下图:

layui-下拉选择框
<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>