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