Question

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

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

我无法在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;，以便浮动不会超出容器。

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

JSF 2.0，如何垂直对齐tomahawk datalist的子项

1 个答案: