在JSF中水平放置组件

Question

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

我想要实现的是一个丰富的:包含2行或更多行的工具栏.我一直试图用一个带有panelgrid和两个面板组的工具栏来做到这一点:

<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

您可能已经知道 Web 服务器中的 JSF 在 Web 浏览器中最终以 HTML 形式出现。在 HTML 中，有几种水平放置元素的方法（最终借助 CSS）：

1. 将它们分组到内联元素中（例如<span>或带有 的任何元素display: inline;）。
2. 将它们分组到块元素中（例如<div>或带有 的任何元素display: block;），并给它们全部添加一个float: left;。

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

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

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

方式 2 可以用同样的方式完成，但然后在 CSS 中使用<h:panelGroup layout="block">a 代替。float: left;