html - h :panelGroup and colspan making my table messed up

Question

我的 table 以前是这样的:

每个字段的右侧都有一个图标，告诉用户他输入的内容是否被接受。图标曾经非常接近现场。但是一旦我添加了另外两个带有 colspan 的字段，它看起来像这样:

当该字段未被接受时它看起来还不错，这没有任何意义，因为两个图像应该在同一个地方。

代码如下:

   <table class="registration">             

            <!-- username -->
            <tr><td>
            <h:outputLabel for="username">#{registering.Username}: </h:outputLabel></td><td>
        <p:inputText id="username" value="#{subscribeUser.user.username}" 
            validator="#{usernameValidator.validate}" maxlength="#{values.small}">
            <f:passThroughAttribute name="required" value="true"/>
            <f:ajax event="blur" render="usernameCheck usernameMessage submit"></f:ajax>
        </p:inputText></td><td>
        <h:panelGroup id="usernameCheck">
            <h:graphicImage library="images/icons" name="failed_indicator.png" rendered="#{usernameValidator.isIndicatorVisible.usernameFailed}"></h:graphicImage>
            <h:graphicImage library="images/icons" name="success_indicator.png" rendered="#{usernameValidator.isIndicatorVisible.usernameSuccess}"></h:graphicImage>
        </h:panelGroup></td><td>
        <span class="error"><h:message id="usernameMessage" for="username"/></span></td>
        </tr>

        <!-- password -->           

        <tr><td>
        <h:outputLabel for="password">#{registering.Password}: </h:outputLabel></td><td>
        <p:password id="password" value="#{subscribeUser.userCredential.password}" feedback="true"

            promptLabel="#{registering.PleaseEnterPass}" weakLabel="#{registering.Weak}"
                  goodLabel="#{registering.Good}" strongLabel="#{registering.Strong}"
            requiredMessage="#{registering.reqPassword}"
            validator="#{passwordValidator.validate}">
            <f:passThroughAttribute name="required" value="true"/>
            <f:attribute name="confirm" value="#{confirmPassword}" />
            <f:passThroughAttribute name="required" value="true"/>
            <f:ajax event="blur" execute="password confirmPassword" render="passwordMessage passwordCheck confpasswordCheck submit"></f:ajax>                       
        </p:password></td><td>
        <h:panelGroup id="passwordCheck">
            <h:graphicImage library="images/icons" name="failed_indicator.png" rendered="#{passwordValidator.isIndicatorVisible.passwordFailed}"></h:graphicImage>
            <h:graphicImage library="images/icons" name="success_indicator.png" rendered="#{passwordValidator.isIndicatorVisible.passwordSuccess}"></h:graphicImage>
        </h:panelGroup>
        </td><td>
        <span class="error"><h:message id="passwordMessage" for="password"/></span></td>
        </tr>           

        <!-- Confirm password -->

        <tr><td>
        <h:outputLabel for="confirmPassword" value="#{registering.ConfirmPass}: "/></td><td>
        <p:password id="confirmPassword" required="true"
            requiredMessage="#{registering.PleaseConfirmPassword}" 
            binding="#{confirmPassword}">
            <f:passThroughAttribute name="required" value="true"/>
            <f:ajax event="blur" execute="password confirmPassword" render="passwordMessage passwordCheck confpasswordCheck submit"></f:ajax>

            </p:password> </td><td>
            <h:panelGroup id="confpasswordCheck">
                <h:graphicImage library="images/icons" name="failed_indicator.png" rendered="#{passwordValidator.isIndicatorVisible.passwordFailed}"></h:graphicImage>
                <h:graphicImage library="images/icons" name="success_indicator.png" rendered="#{passwordValidator.isIndicatorVisible.passwordSuccess}"></h:graphicImage>
            </h:panelGroup>

            </td><td>
        <span class="error"><h:message id="passwordConfMessage" for="confirmPassword" /></span></td>
        </tr>

        <!-- Email -->

        <tr><td>
            <h:outputLabel for="email">#{registering.Email}: </h:outputLabel></td><td>
        <p:inputText id="email" required="true" value="#{subscribeUser.user.email}" 
            validator="#{emailValidator.validate}"
            requiredMessage="#{registering.reqEmail}">
            <f:passThroughAttribute name="required" value="true"/>
            <f:passThroughAttribute name="type" value="email"/>
            <f:passThroughAttribute name="maxlength" value="100"/>
            <f:ajax event="blur" render="emailCheck emailMessage submit"></f:ajax>

        </p:inputText></td><td>
         <h:panelGroup id="emailCheck">
            <h:graphicImage library="images/icons" name="failed_indicator.png" rendered="#{emailValidator.isIndicatorVisible.emailFailed}"></h:graphicImage>
            <h:graphicImage library="images/icons" name="success_indicator.png" rendered="#{emailValidator.isIndicatorVisible.emailSuccess}"></h:graphicImage>
        </h:panelGroup> </td><td>
        <span class="error"><h:message id="emailMessage" for="email"/></span></td>
        </tr>

        <!-- Country -->

                <tr><td>
        <h:outputLabel for="country" value="#{registering.Country}:"></h:outputLabel></td>
        <td colspan="3"><p:selectOneMenu required="true" editable="false" id="country" value="#{subscribeUser.user.countryBean}" converter="#{countriesConverter}" effect="fold">
                        <f:selectItem itemLabel="#{registering.SelectCountry}" itemValue="#{null}" />
                        <f:selectItems value="#{countriesConverter.countries}" var="country" itemLabel="#{country.shortName}" itemValue="#{country}" />
                        </p:selectOneMenu></td>
        </tr>
        <!-- Timezone -->   

                     <tr><td>
        <h:outputLabel for="timezone">#{registering.Timezone}: </h:outputLabel></td>
        <td colspan="3">
            <p:selectOneMenu id="timezone" editable="false" required="true" value="#{subscribeUser.timezoneOffset}" converter="#{timezonesConverter}" effect="fold" >
                <f:selectItem itemLabel="#{registering.SelectTimezone}" itemValue="#{null}" />
                <f:selectItems value="#{timezonesConverter.timezonesList}" var="timezone" itemLabel="#{timezone.name}" itemValue="#{timezone}"  />
                </p:selectOneMenu></td>
        </tr>     
    </table>

我不明白如何让它发挥作用。我尝试使用 primefaces p:row 但这是同样的问题。我不愿意为最后两个字段使用另一个表格并将它们与它们上方的表格对齐，因为当调整页面大小时它也被弄乱了。

Answer 1

如果接近度是您唯一关心的问题，我建议您回到第一个示例并在 css 中编写如下内容:

.registration td:last-child{
    margin-left: 20px;
}

或尝试使用 nth-child(desired-child-number) .

除此之外，我建议您使用 <h:panelGrid columns="3">作为容器。你将拥有:

1. 第一列作为占位符，即字段描述，
2. 第二列是字段，
3. 第三列是输入值的成功/错误信息

我已经用过了，效果很好。另外，您可以添加我之前提到的 css 规则