2

我正在使用 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 中。

4

1 回答 1

2

将它们包裹在左浮动中<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;在包含元素上有 a ，以便浮动不会超出容器。

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

于 2011-09-20T11:37:10.487 回答