JSF 2.0，如何垂直对齐战斧数据列表的子级

Question

我正在使用 t:datalist 和 JSF 2.0 来水平对齐图像。但我想在图像下方垂直列出每个图像的属性。现在属性也与图像一起水平列出。我使用的代码是：

    <t:dataList var="item" value="#{listItems.dataList}" id="listItems"> 
                        <h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
                        <h:outputText value="#{item.prodName}" />
                        <h:outputText value="#{item.prodPrice}" />
            </t:dataList>

我无法在数据列表中使用纯 html 表标签来列出图像下方的名称和价格属性。经过一番搜索后发现了一个名为 f:verbatim 的标签，但我也无法使其工作。也尝试将 html table 标签放入 panelGroup 中。

Answer 1

将它们包裹在左浮动

中，并将线条放在图像下方
处。

<t:dataList var="item" value="#{listItems.dataList}" id="listItems"> 
    <div class="box">
        <h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
        <br /><h:outputText value="#{item.prodName}" />
        <br /><h:outputText value="#{item.prodPrice}" />
    </div>
</t:dataList>

例如，使用此 CSS

.box {
    float: left;
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
}

Only 确保包含元素上有 clear: left; ，以便浮动不会超出容器。

---

与该问题无关，请记住 在 JSF 2 中已弃用。您不应再使用它。您也不再需要它了。在 JSF 1.0/1.1 中，该标签是强制性的，以便能够在 JSF 页面中使用纯 HTML 标签。从 JSF 1.2 开始，它不再是强制性的。您可以在 JSF 页面中的任意位置内联 HTML 标记，而无需摆弄 。