h：panelGroup和colspan让我的桌子搞砸了

Question

我的桌子看起来像这样：

每个字段右侧都有一个图标，告诉用户他输入的内容是否被接受。这些图标过去非常接近现场。但是一旦我用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规则