呈现输入文本字段时出现对齐问题

Question

我们有四个标签在所有标签中，名字和姓氏将相同但是，单击选项卡后，第三字段会根据选项卡ID /具有相应ID的呈现方式进行更改。

问题出在第三个字段上，在单击选项卡2、3和4后，它稍微移开了，

调查注释的标签4具有输入区域

如何实现如下所示的布局？

预期输出

标签1

            First Name       [_________]                    Last Name [_________]

            Initial Pricing  [_________] 

选项卡2

            First Name       [_________]                    Last Name [_________]

            Selling Price    [_________]                

选项卡3

            First Name       [_________]                    Last Name [_________]

            Cost Price       [_________]                

选项卡4

            First Name       [_________]                    Last Name [_________]

            Survey Comments  [_____________________]    

代码

<h:form>
<p:panelGrid columns="4"  styleClass="panelNoBorder">


<p:outputLabel value="First Name" />        
<p:inputText id="First Name" value="#{First Name}" maxlength="10" style="width: 20%;"> </p:inputText>


<p:outputLabel value="Last Name" />
<p:inputText id="Last Name" value="#{Last Name}" maxlength="10" style="width: 20%;"> </p:inputText>

<p:outputLabel value="Initial Pricing" rendered="#{javaMB.tabId eq 1}" />
<p:inputText id="Initial Pricing" value="#{Initial Pricing}" maxlength="10" style="width: 20%;" rendered="#{javaMB.tabId eq 1}"> </p:inputText>

<p:outputLabel value="Selling Price" rendered="#{javaMB.tabId eq 2}" />
<p:inputText id="Selling Price" value="#{Selling Price}" maxlength="10" style="width: 20%;"rendered="#{javaMB.tabId eq 2}">  </p:inputText>

<p:outputLabel value="Cost Price" rendered="#{javaMB.tabId eq 3}" />
<p:inputText id="Cost Price" value="#{Cost Price}" maxlength="10" style="width: 20%;" rendered="#{javaMB.tabId eq 3}"> </p:inputText>

<p:outputLabel value="Survey Comments" rendered="#{javaMB.tabId eq 4}" />
<p:inputArea id="Survey Comments" value="#{Survey Comments}" rows="10" cols="50"  style="width: 20%;" rendered="#{javaMB.tabId eq 4}"> </p:inputTextarea    

</p:panelGrid>
</h:form>

实际输出/问题

标签1

            First Name       [_________]                    Last Name [_________]

            Initial Pricing  [_________] 

选项卡2

            First Name       [_________]                    Last Name [_________]

                        Selling Price    [_____________]                

选项卡3

            First Name       [_________]                    Last Name [_________]

                                    Cost Price       [_________]                

选项卡4

            First Name       [_________]                    Last Name [_________]

                                                Survey Comments            [_____________________] 

我尝试过的，试图将第三个字段放在一列中，但这超出了预期的输出。

Answer 1

您可以这样尝试吗：

    <p:panelGrid styleClass="panelNoBorder">
        <p:row>
            <p:column>
                <p:outputLabel value="First Name" />
            </p:column>
            <p:column>
                <p:inputText id="First Name" value="#{First Name}" maxlength="10"
                    style="width: 20%;">
                </p:inputText>
            </p:column>
            <p:column>
                <p:outputLabel value="Last Name" />
            </p:column>
            <p:column>
                <p:inputText id="Last Name" value="#{Last Name}" maxlength="10"
                    style="width: 20%;">
                </p:inputText>
            </p:column>
        </p:row>
        <p:row rendered="#{javaMB.tabId eq 1}">
            <p:column>
                <p:outputLabel value="Initial Pricing" />
            </p:column>
            <p:column colspan="3">
                <p:inputText id="Initial Pricing" value="#{Initial Pricing}"
                    maxlength="10" style="width: 20%;">
                </p:inputText>
            </p:column>
        </p:row>
        <p:row rendered="#{javaMB.tabId eq 2}">
            <p:column>
                <p:outputLabel value="Selling Price" />
            </p:column>
            <p:column colspan="3">
                <p:inputText id="Selling Price" value="#{Selling Price}"
                    maxlength="10" style="width: 20%;">
                </p:inputText>
            </p:column>
        </p:row>
        <p:row rendered="#{javaMB.tabId eq 3}">
            <p:column>
                <p:outputLabel value="Cost Price" />
            </p:column>
            <p:column colspan="3">
                <p:inputText id="Cost Price" value="#{Cost Price}" maxlength="10"
                    style="width: 20%;">
                </p:inputText>
            </p:column>
        </p:row>
        <p:row rendered="#{javaMB.tabId eq 4}">
            <p:column>
                <p:outputLabel value="Survey Comments" />
            </p:column>
            <p:column colspan="3">
                <p:inputArea id="Survey Comments" value="#{Survey Comments}"
                    rows="10" cols="50" style="width: 20%;" />
            </p:column>
        </p:row>
    </p:panelGrid>