CSS 开始逐渐的喜欢编写CSS样式了 这里记录下自己的一些小小收获

在查询时经常需要将条件谓词使用相同的宽度来展示：

可以使用如下的css

.cons{
	width: 90px;
	text-align:right;
	padding-right:10px;
	display:inline-block;
}

   <div id="queryDiv" region="north" border="false" split="false" style="height:140px;"scroll="no">
        <div class="hd" style="margin-left:5px;margin-top:10px;">
			<div style="margin-right:20px;float:right;">
				<a href="#" class="easyui-linkbutton" plain="true" iconcls="icon-search" id="complex" οnclick="javascript:openQueryDialog()">高级查询</a>
				<a href="#" class="easyui-linkbutton" plain="true" iconcls="icon-search" id="EXCEL" onClick="javascript:window.location.href='dataChg_exportRccDataExcel.action'">Excel导出</a>
			</div>
           <div style="margin-bottom:8px;">
	          <div class="cons">船舶识别号：</div><input type="text" class="inputStyle" id="simpleQueryShipId" />
	          <span class="cons">船舶名称：</span><input type="text" class="inputStyle" id="simpleQueryShipName" maxlength="50" value="" />
	          <span class="cons">船舶MMSI：</span><input type="text" class="inputStyle" id="simpleQueryShipMmsi" maxlength="50" value="" />
	          <span class="cons">船舶呼号：</span><input type="text" class="inputStyle" id="simpleQueryShipSign" maxlength="50" value="" />
			</div>
	       <div id="query" style="margin-bottom:8px;display:none;">
              <span class="cons">船舶长度：</span>
               <INPUT type="text" id="queryShipWeightFrom" class="inputStyle" style="width:60px" maxlength="50" value="" /> ~ 
               <INPUT type="text" id="queryShipWeightTo" class="inputStyle" style="width:60px" maxlength="50" value="" />                      
              <span class="cons">总吨位(吨)：</span>
               <INPUT type="text" id="queryShipWeightFrom" class="inputStyle" style="width:60px" maxlength="50" value="" /> ~ 
               <INPUT type="text" id="queryShipWeightTo" class="inputStyle" style="width:60px" maxlength="50" value="" /> 
              <span class="cons">船籍港: </span> <input type="text" class="inputStyle" style="width:100px" id="queryHarborCode"/>                                 
              <span class="cons">船舶种类：</span>   <input type="text" class="inputStyle" style="width:100px" id="queryGenericType"/>
               <input type="text" class="inputStyle" style="width:100px" id="queryShipType"/>
               <br />
              <div class="cons"  style="margin-top:8px;">公司名称：</div>
                <input type="text" class="inputStyle" id="queryCompanyName" maxlength="50" value="" />
            </div>
            <div id="errorInfo" style="margin-right:90px;float:left;"></div>
            <div style="margin-right:90px;float:right;">
	            <div style="margin-right:90px;float:left;">
		            <a href="#" class="easyui-linkbutton" plain="true" iconcls="icon-search" οnclick="javascript:openSimpleQueryDialog();">查询</a> 
		            <a href="#" class="easyui-linkbutton" plain="true" iconcls="icon-reload" id="refresh">更新</a>
	            </div>
	        </div>
        </div>
	</div>

实现后的效果如下：

可以看到文字部分的长度是固定的均为 90px，其中关键的属性是display：inline-block ;