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

Question

我想创建一个JSF表单，用户可以在其中写入姓名和姓氏并使用JSF验证器验证它们。问题是，我希望在表单中的2个inputText框之间设置相同的空格，在这两种情况下，当类型化数据根据验证器是正确的，以及何时不正确。因此，如果在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将不会有任何内容，因此它不会占用您提供的任何空间。
一种方式做，这是使用h:panelGroup围绕它，并给预p:message
例的定义高度：

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