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最终会成为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;。

在JSF中水平放置组件

1 个答案: