DWZ查詢頁面布局改造(2)

先來看看視窗縮小後的效果：

出現了滾動條，頁面查詢條件内容都存在了。但是如果查詢條件是單行的時候，我們來看看效果圖：

紅色标出的，有下拉框的部分，成了上下對齊格式，這不符合我們的要求！我們要水準對齊。

改造的部分代碼：

<td>
      <label>交易類型：</label>
      <select class="combox" name="vtype">      

效果圖

再次恢複到雙行，我們來看一下效果：

發現紅色标出的内容上下沒有對齊，為了追求完美，我們繼續改造，在商品名稱上也加上label标簽。

部分代碼：

<td>
      <label>商品名稱：</label>
      <input type="text" name="vsname" value="${vo.mo.vsname}" <c:if test="${vo.mo.codeflag == 1}">readonly</c:if> id="xiweidinghuohuizongListPage_vsname"/>
     </td>
<td>
      <label>交易類型：</label>
      <select class="combox" name="vtype">
       <option value="-1" <c:if test="${vo.mo.vtype==-1}">selected="selected"</c:if>>全部</option>
       <option value="1" <c:if test="${vo.mo.vtype==1}">selected="selected"</c:if>>賣</option>
       <option value="0" <c:if test="${vo.mo.vtype==0}">selected="selected"</c:if>>買</option>
      </select>
     </td>      

再來看效果：

再縮小一些：

發現紅色标出的内容又不見了， 我暫時沒有想到好的辦法解決掉這個麻煩，小夥伴可有方法，請告知。

總結：一個小小的布局，都需要不斷的調試才能做到最優。對于這個問題解決的辦法就是：

ul标簽需要替換為table标簽

有combo的地方，文字說明需要加上标簽label

有textinput的地方，文字說明不要加标簽label