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>