JSF panelGrid输入字段对齐问题：首个输入框未正确对齐

你的第一个输入字段（txt1）嵌套在子<h:panelGrid>里，而其他输入字段直接放在主panelGrid的第二列，这种嵌套table的结构导致子panelGrid的宽度没有和主panelGrid第二列的其他输入元素保持一致，因此出现错位。下面是几种可行的解决方法：

方案1：移除嵌套子panelGrid，统一布局结构 #

直接把第一个输入框和对应标签放在同一列内，用行内元素排版，避免嵌套table带来的对齐问题：

<h:form id="MF">
    <div align="center" class="form-align">
        <div align="left" class="block-align use-border" style="width:80%">
            <div align="left" class="block-align" style="width:100%">
                <h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
                    <h:column>
                        <h:outputText id="lbl1" styleClass="lbltxt" value="#{---}" style="width:200px;"/>
                    </h:column>
                    <h:column>
                        <h:inputText id="txt1" value="#{---}" styleClass="inputfld" size="10" maxlength="6" 
                                     onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" 
                                     onkeypress="keyPressEvents(this)" onkeyup="keyUpEvents(this)"/>
                        <h:outputLabel id="outlbl1" for="txt1" styleClass="lbltxt"/>
                    </h:column>
                </h:panelGrid>
            </div>
        </div>
        <br>
        <div align="left" class="block-align use-border" style="width:80%">
            <div align="left" class="block-align" style="width:100%">
                <h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
                    <h:column>
                        <h:outputText id="lbl2" value="#{---}" styleClass="lbltxt" style="width:200px;"/>
                    </h:column>
                    <h:column>
                        <h:inputText id="txt2" value="#{---}" styleClass="inputfld" size="10" readonly="true"/>
                    </h:column>

                    <h:column>
                        <h:outputText style="text-align:left;" id="lbl3" styleClass="lbltxt" value="#{---}"/>
                    </h:column>
                    <h:column>
                        <h:inputTextarea id="txt3" value="#{---}"
                                         styleClass="inputfld" rows="10" cols="65"
                                         onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)">
                        </h:inputTextarea>
                    </h:column>

                    <h:column>
                        <h:outputText id="lbl4" value="#{---}" styleClass="lbltxt" style="width:200px;"/>
                    </h:column>
                    <h:column>
                        <h:inputTextarea id="txt4" value="#{---}"
                                         styleClass="inputfld" rows="10" cols="65"
                                         onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)">
                        </h:inputTextarea>
                    </h:column>
                </h:panelGrid>
            </div>
        </div>
    </div>
</h:form>

方案2：给嵌套子panelGrid设置宽度强制对齐 #

如果必须保留子panelGrid，给它设置width="100%"让其占满主panelGrid第二列宽度，同时给主panelGrid的列设置固定宽度，确保所有行的第二列宽度一致：

<h:form id="MF">
    <div align="center" class="form-align">
        <div align="left" class="block-align use-border" style="width:80%">
            <div align="left" class="block-align" style="width:100%">
                <h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2" style="width:100%">
                    <h:column style="width:200px;">
                        <h:outputText id="lbl1" styleClass="lbltxt" value="#{---}"/>
                    </h:column>
                    <h:column>
                        <h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2" style="width:100%">
                            <h:column>
                                <h:inputText id="txt1" value="#{---}" styleClass="inputfld" size="10" maxlength="6" 
                                             onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" 
                                             onkeypress="keyPressEvents(this)" onkeyup="keyUpEvents(this)"/>
                            </h:column>
                            <h:column>
                                <h:outputLabel id="outlbl1" for="txt1" styleClass="lbltxt"/>
                            </h:column>
                        </h:panelGrid>
                    </h:column>
                </h:panelGrid>
            </div>
        </div>
        <br>
        <div align="left" class="block-align use-border" style="width:80%">
            <div align="left" class="block-align" style="width:100%">
                <h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2" style="width:100%">
                    <h:column style="width:200px;">
                        <h:outputText id="lbl2" value="#{---}" styleClass="lbltxt"/>
                    </h:column>
                    <h:column>
                        <h:inputText id="txt2" value="#{---}" styleClass="inputfld" size="10" readonly="true"/>
                    </h:column>

                    <h:column>
                        <h:outputText style="text-align:left;" id="lbl3" styleClass="lbltxt" value="#{---}"/>
                    </h:column>
                    <h:column>
                        <h:inputTextarea id="txt3" value="#{---}"
                                         styleClass="inputfld" rows="10" cols="65"
                                         onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)">
                        </h:inputTextarea>
                    </h:column>

                    <h:column>
                        <h:outputText id="lbl4" value="#{---}" styleClass="lbltxt"/>
                    </h:column>
                    <h:column>
                        <h:inputTextarea id="txt4" value="#{---}"
                                         styleClass="inputfld" rows="10" cols="65"
                                         onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)">
                        </h:inputTextarea>
                    </h:column>
                </h:panelGrid>
            </div>
        </div>
    </div>
</h:form>

方案3：用CSS统一控制对齐 #

在样式表中添加规则，统一主panelGrid第二列的宽度和对齐方式：

.panel-grid-col-2 {
    width: calc(100% - 200px);
    vertical-align: top;
}

然后在JSF代码中给主panelGrid的第二列添加样式类：

<h:column styleClass="panel-grid-col-2">
    <!-- 对应输入元素内容 -->
</h:column>

以上方案中，优先推荐方案1，它简化了布局结构，减少嵌套带来的兼容性问题。

内容的提问来源于stack exchange，提问作者iAngkur