Question

我正在尝试使用JSF标记在同一行显示图像和文本。有没有办法做到这一点？ oringinal代码如下所示，但图像和文本总是以2行显示。

    <rich:modalPanel id="Busy" autosized="true" zindex="2000">
        <h:outputText value="Submitting..."></h:outputText>
        <h:graphicImage value="images/loading.gif" />
    </rich:modalPanel>

Answer 1

你可以试试这个

<rich:modalPanel id="Busy" autosized="true" zindex="2000">
   <h:panelGrid columns="2">
      <h:outputText value="Submitting..."></h:outputText>
      <h:graphicImage value="images/loading.gif" />
   </h:panelGrid>
</rich:modalPanel>

将把所有子元素排列在一个表中，其中包含指定数量的列（在本例中为2）。

h:panelGrid

Answer 2

最佳解决方案是直接在CSS属性中定义直线：

<h:outputText value="Submitting..." styleClass="loading"/>

并在你的CSS中：

.loading {
    background-image: url('images/loading.gif');
}

然后，您必须adapt your CSS class才能正确显示您的图片。

文字＆amp; JSF中的图像布局

2 个答案: