x1c 0d1xI在DIV标签中有两个字段。这些字段使用jquery rules/validator进行验证，当验证错误发生时，它会在DIV标记中的输入字段的右侧显示错误消息。问题是，当规则验证器显示相对较长的错误消息时，错误消息移动到下一行，这将下一个div标记推到底部，并且它只对右侧的表单输入字段执行此操作，而不对左侧的标签（也是DIV）执行此操作。因此标签和输入字段未对齐。所附图像具有未对准的字段。
字段pseudo，

<DIV class="outer-left-bm">Location:&nbsp;</DIV><DIV class="outer-right-bm"><form:select path="location" items="${locationList}" itemValue="code" itemLabel="desc" /></DIV>
<DIV class="outer-left-bm">Reference Transaction Number:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="refTranNbr" maxlength="20" size="20" /></DIV>
<DIV class="outer-left-bm">Date of Reference Transaction:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="refTranDate" size="10" maxlength="10" /> (mm/dd/yyyy)</DIV>

Jquery规则/验证器消息

$("#aFormID").validate({
        rules: {            
            refTranNbr: {
                required:  function (element) {
                    return $("#refTranDate").val().length > 0;
                },
                refNumChk: true
            },
            refTranDate: {
                required:  function (element) {                 
                    return $("#refTranNbr").val().length > 0;
                },
                lessThanToday: true
            },
            messages: {         
                    refTranNbr: {
                        required: "Please enter the reference transaction number to complete this transaction.",        
                        refNumChk: "Please enter a valid Reference Transaction Number.  Note: All letters must be in upper case."
                    },          
                    refTranDate: {
                        required : "Please enter a date for the Refering Transaction to complete this transaction.",
                        lessThanToday: "Please enter a reference transaction date less than today's date."
            }
            }

    });

对应的CSS：

DIV.outer-left-bm {
    width:50%;
    float: left;
    border: 1px;
    text-align: right;
    margin-bottom: 8px;
}
DIV.outer-right-bm {
    width: 50%;
    float: right;
    border: 1px;
    text-align: left;
    margin-bottom: 8px;
}
label.error {
    /* remove the next line when you have trouble in IE6 with labels in list */
    color: red; 
    font-size: 9pt;
    font-style: italic;
    word-break:break-all;
}