jsf - JSF中组件的水平放置

Question

应该很简单，但我找不到答案，我想水平放置组件而不是垂直放置。

我想要实现的是一个 Rich:toolbar 有 2 行或更多行。我一直在尝试使用具有面板网格和两个面板组的工具栏来做到这一点:

<rich:toolbar...>
  <f:panelgrid columns="1"...>
    <f:panelgroup id="row1" .../>  <-- Should be horizontal placement
    <f:panelgroup id="row2" .../>  <-- Should be horizontal placement
  <f:panelgrid/>
<rich:toolbar/>

那么如何使面板组布局水平(或者我应该使用其他东西？)

谢谢!

Answer 1

您可能已经知道 webserver 中的 JSF 在 webbrowser 中最终为 HTML。在 HTML 中，有几种方法可以水平放置元素(最终借助 CSS):

将它们分组为内联元素(如 <span> 或任何带有 display: inline; 的元素)。

将它们分组为块元素(如 <div> 或任何带有 display: block; 的元素)和 给他们一个 float: left; .

JSF <h:panelGrid>呈现 HTML <table>元素，其中每个子组件都被视为 <td> . columns属性表示 <td> 的最大数量单个 <tr> 中的元素(以便 <h:panelGrid> 知道何时放入 </tr><tr>)。 JSF <h:panelGroup>呈现 <span>元素。

要使用 JSF 实现方式 1，您只需要将它们分组到单独的 <h:panelGroup> 中。成分。

<rich:toolbar ...>
    <h:panelgroup id="row1" ... />
    <h:panelgroup id="row2" ... />
</rich:toolbar>

方式 2 可以用同样的方式完成，但使用 <h:panelGroup layout="block">取而代之的是 float: left;在他们的 CSS 中。