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 表格标签放在 panelGroup 中。

Answer 1

将它们包裹在一个左浮动的<div> 中，并将行放在图像下方<br>。

<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;
}

只需确保在包含元素上有一个clear: left;，这样浮动就不会超出容器。

---

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