使用colspan时，组件不在预期的行上

Question

我有一个包含5行和7列的panelgrid，并尝试使用colspan排列列中的不同组件。我会在下面贴上我的xhtml：

            <p:panelGrid>
                <p:row>
                    <p:column>

                        <p:row>
                            <p:column>
                                <p:outputLabel value="Job Status:" />
                            </p:column>
                            <p:column colspan="4">
                                <p:selectOneMenu value="#{myBean.jobStatus}">
                                   f:selectItems here
                                </p:selectOneMenu>
                            </p:column>                                                     
                            <p:column>
                                <p:selectBooleanCheckbox id="cbRepetition"
                                    value="#{myBean.isRepeatable}"
                                </p:selectBooleanCheckbox>
                            </p:column>
                            <p:column>
                                <p:outputLabel value="Terminate repetition of this job?" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <p:outputLabel value="Positions:" />
                            </p:column>
                            <p:column>
                                <p:spinner id="position1"
                                    value="#{myBean.selectedPosition1}" />
                            </p:column>
                            <p:column>
                                <p:spinner id="position2"
                                    value="#{myBean.selectedPosition2}" />
                            </p:column>
                            <p:column>
                                <p:spinner id="position3"
                                    value="#{myBean.selectedPosition3}" />
                            </p:column>
                            <p:column>
                                <p:spinner id="position4"
                                    value="#{myBean.selectedPosition4}" />
                            </p:column>                                                     
                            <p:column>
                                <p:outputLabel value="Occurrences:" />
                            </p:column>
                            <p:column>
                                <p:spinner id="occurrences"
                                    value="#{myBean.selectedOccurrences}" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <p:outputLabel value="Date/Time:" />
                            </p:column>
                            <p:column colspan="4">
                                <p:calendar id="dateTime" pattern="dd/MM/yyyy HH:mm"
                                    value="#{myBean.selectedDateTime}">
                                </p:calendar>
                            </p:column>                                                     
                            <p:column>
                                <p:outputLabel value="Job Location:" />
                            </p:column>
                            <p:column>
                                <p:selectOneMenu id="locationDd"
                                    value="#{myBean.selectedLocationId}">
                                    <f:selectItem itemLabel="Select" itemValue="0" />
                                    <f:selectItem itemLabel="Australia" itemValue="1" />
                                    <f:selectItem itemLabel="Springfield" itemValue="2" />
                                </p:selectOneMenu>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <p:outputLabel value="Comments:" />
                            </p:column>
                            <p:column colspan="6">
                                <p:inputTextarea />
                            </p:column>
                        </p:row>

                    </p:column>
                </p:row>
            </p:panelGrid>

我已稍微重构了一下代码，例如jobStatus selectOneMenu实际上是我创建的自定义组件，但我确信这不是问题所在＆＃＆＃？ 39;在我的项目的其他地方使用过没有任何麻烦。

此panelGrid位于表单内的面板中。

我希望显而易见的是我想要实现的目标，但我实际得到的内容如下：

我已经使用CSS来使旋转器更小，因为它们应该足够大以适合0-9的整数，但这没有任何效果，任何建议为什么事情都没有对正确的事情做出反应我可以做的行或事情让它们按照我的意愿展示？

干杯。

Answer 1

我已经意识到我只需要删除最初的<p:row>和<p:column>，这样就可以了。