把你的搜索条件放整齐

        一个人性化的系统，不仅仅是功能上的人性化，更要给客户视觉和体验上的人性化。

        我们都知道，一个好的系统，在查询方面的设置是非常重要的。而搜索条件多了，难免变得不整齐，这在很大程度上降低了客户对我们系统的分数。所以，我们既要做到给出人性化的搜索条件，又要让界面整齐美观。

        由于我们的系统是由一个小组合作完成的，在开发的过程中对于搜索条件的位置摆放没有注意统一。再加上我们平时总对着自己的界面，并且把更多的精力放在了功能上，结果在验收的时候，首先提出的问题就是搜索框的整齐问题。下面，我介绍一种方法来统一这种潜在的不统一 -----使用表格布局搜索条件。

        首先给我们没有使用表格布局时的搜索条件图

        

        未使用表格布局的搜索条件，条件的名称长短不一致，条件框的长短也不一致。看上去，有的长有的短，每行的长短也不相同。看上去很不美观。

        下面是我们使用了表格布局的搜索条件图

       

        使用了表格布局的搜索框，条件名称的长短一致，条件框的长短也是一致的。看上去很整齐划一。

        下面给出我们实现的代码：

        这里只给出HTML部分：

<table>
             <tbody>
                         <tr>
                                    <td class="searchtables"><label class="first txt-green">学　　年：</label></td>
                                    <td class="searchtabled"><asp:DropDownList CssClass="dropdown searchbox" ID="dropSchoolYear" runat="server" AutoPostBack="True" onselectedindexchanged="dropSchoolYear_SelectedIndexChanged"></asp:DropDownList></td>
                                    <td class="searchtables"><label class="txt-green">学　　期：</label></td>
                                    <td class="searchtabled"><asp:DropDownList CssClass="dropdown searchbox" ID="dropSemester" runat="server"></asp:DropDownList></td>
                                    
                                    <!--最后留一个空的td标记，这样保证所有的标记是靠左的。-->
                                    <td></td>
                        </tr>
                        <tr>
                                    <td class="searchtables"><label class="txt-green">课程学院：</label></td>
                                    <td class="searchtabled"><asp:DropDownList CssClass="dropdown searchbox" ID="dropCollege" runat="server" AutoPostBack="True" onselectedindexchanged="dropCollege_SelectedIndexChanged"></asp:DropDownList></td>
                                    <td class="searchtables"><label class="txt-green">课　　程：</label></td>
                                    <td class="searchtabled"><asp:DropDownList CssClass="dropdown searchbox" ID="dropCourse" runat="server"></asp:DropDownList></td>
                                    <td class="searchtables"><label class="txt-green">教师学院：</label></td>
                                    <td class="searchtabled"><asp:DropDownList CssClass="dropdown searchbox" ID="DropDownList1" runat="server" AutoPostBack="True" onselectedindexchanged="dropCollege_SelectedIndexChanged"></asp:DropDownList></td>
                                    <td class="searchtables"><label class="txt-green">任课教师：</label></td>
                                    <td class="searchtabled"><asp:DropDownList CssClass="dropdown searchbox" ID="DropDownList2" runat="server"></asp:DropDownList></td>
                                    <!--按钮也要放到一个td中。-->
                                    <td class="searchtables"><asp:LinkButton ID="btnSearch" CssClass="btn-lit" onclick="btnSearch_Click"  runat="server"><span>查询</span></asp:LinkButton></td>
                                    <!--最后留一个空的td标记，这样保证所有的标记是靠左的。-->
                                    <td></td>
                       </tr>
             </tbody>
  </table>

        这里总的思路是这样的：将搜索条件名称放入单数列中，将搜索框放入双数列中，这样我们只要设置单数列和双数列的CSS，就可以很容易的控制他们的间距。同时，我们将所有的搜索框都加上了一个class，统一他们的长度。

         CSS代码就很简单了，就是单数列的class设定的宽度稍短，双数列的宽度稍长，但是他们都是一致的哦。

        其实，对于大多数人来说，这实现起来非常简单，只不过有的人懒得去弄而已。技术永远不是制约我们的关键，关键在于我们敢于去实现它。