myfaces t:tree2 显示问题，显示不规则

Question

<t:tree2 id="clientTree" value="#{userManager.treeData}" var="node" varNodeToggler="t" clientSideToggle="true">
        <f:facet name="person">
            <h:panelGroup>
                <f:facet name="expand">
                    <t:graphicImage value="/img/yellow-folder-open.png" rendered="#{t.nodeExpanded}" border="0"/>
                </f:facet>
                <f:facet name="collapse">
                    <t:graphicImage value="/img/yellow-folder-closed.png" rendered="#{!t.nodeExpanded}" border="0"/>
                </f:facet>
                <h:outputText value="#{node.description}" styleClass="nodeFolder"/>
            </h:panelGroup>
        </f:facet>
        <f:facet name="foo-folder">
            <h:panelGroup>
                <f:facet name="expand">
                    <t:graphicImage value="/img/yellow-folder-open.png" rendered="#{t.nodeExpanded}" border="0"/>
                </f:facet>
                <f:facet name="collapse">
                    <t:graphicImage value="/img/yellow-folder-closed.png" rendered="#{!t.nodeExpanded}" border="0"/>
                </f:facet>
                <h:outputText value="#{node.description}" styleClass="nodeFolder"/>
                <h:outputText value=" (#{node.childCount})" styleClass="childCount" rendered="#{!empty node.children}"/>
            </h:panelGroup>
        </f:facet>
        <f:facet name="bar-folder">
            <h:panelGroup>
                <f:facet name="expand">
                    <t:graphicImage value="/img/blue-folder-open.gif" rendered="#{t.nodeExpanded}" border="0"/>
                </f:facet>
                <f:facet name="collapse">
                    <t:graphicImage value="/img/blue-folder-closed.png" rendered="#{!t.nodeExpanded}" border="0"/>
                </f:facet>
                <h:outputText value="#{node.description}" styleClass="nodeFolder"/>
                <h:outputText value=" (#{node.childCount})" styleClass="childCount" rendered="#{!empty node.children}"/>
            </h:panelGroup>
        </f:facet>
        <f:facet name="document">
            <h:panelGroup>
                <h:commandLink immediate="true" styleClass="#{t.nodeSelected ? 'documentSelected':'document'}" actionListener="#{t.setNodeSelected}">
                    <t:graphicImage value="/img/document.png" border="0"/>
                    <h:outputText value="#{node.description}"/>
                    <f:param name="docNum" value="#{node.identifier}"/>
                </h:commandLink>
            </h:panelGroup>
        </f:facet>
    </t:tree2>按例子做的一个示例，运行之后出现，树显示不正确。打开节点后，下面的子节点和页子，显示的不对齐。
（杂乱无章的，同层之间显示不在同一坚线上。。）

Answer 1

jsf的？
没深入整过，等大牛
显示样式估计是css style控制的
数据整出来就不关框架什么事了

Answer 2

把myfaces-example-simple20-1.1.10中源码的css拷贝进来的，而且css也起了作用了
可就是显示不齐

Answer 3

原来是页面中用了<center>标签，也就是<t:tree2>标签中<center>中了，所以显示出有问题

Answer 4

<t:tree2>标签在<center>中了