使用 JSF 和 CSS 的 2 个 inputText 框之间相同 space

Question

我想创建一个 JSF 表单，用户可以在其中输入他们的名字和姓氏，并使用 JSF 验证器验证它们。问题是我想在表单中的 2 个 inputText 框之间设置相同的 space，在这两种情况下，根据验证器输入的数据是正确的，而当它不正确时。因此，如果在 2 个 inputText 框之间有 X 个像素，如果用户没有输入任何内容，当输入的名称不正确时，错误显示消息应该显示在 2 个 inputText 框之间，并且它们之间的像素也应该是 X px。我想这是一个 CSS 问题，但我无法得到它，所以任何帮助将不胜感激。

这是我的代码

<h:form>
                <p:panel id="panelregister">
                <h:panelGrid columns="1">

                    <!--Name-->
                    <p:inputText id="name" label="name" size="32" maxlength="9"
                             value="#{mManagedBean.name}">              
                    <f:validator validatorId="packagevalidators.NameValidator"/> 
                    </p:inputText>
                    <p:watermark for="name" value="Name (*)" />
                    <p:message for="name"/>




                    <!--Surname-->
                    <p:inputText id="surname" label="surname" required="true" size="32" maxlength="9"
                            value="#{mManagedBean.surname}"
                            requiredMessage="Must enter a surname">              
                        <f:validator validatorId="packagevalidators.SurnameValidator"/> 
                   </p:inputText>
                   <p:watermark for="surname" value="Surname (*)" />
                   <p:message for="surname" />

                 <p:commandButton value="Submit" action="#{mManagedBean.save}" ajax="false" />
                 </h:panelGrid>
                 </p:panel>
             </h:form>

Answer 1

您使用的 h:panelGrid 呈现为 HTML <table>.
p:message 将呈现为 div，默认情况下 div 不会包含任何内容，因此它不会占用您提供的任何 space。
一种方法是在其周围使用 h:panelGroup 并给出 p:message
的预定义高度示例：

<h:panelGroup layout="block" style="height:27px">
    <p:message for="name" />
</h:panelGroup>

使用 JSF 和 CSS 的 2 个 inputText 框之间相同 space

Same space between 2 inputText boxes using JSF and CSS

css

jsf