JSF組件的水平放置

Question

應該很簡單，但我找不到答案，我想水平放置組件而不是垂直放置組件。

我試圖實現的是一個富有：2行或更多行的工具欄。我一直在嘗試這樣做，與具有panelGrid的和兩個panelgroups這樣的工具欄：

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

那麼，如何讓panelGroup中佈局水平（或我應該使用別的東西嗎？）

謝謝！

Answer 1

您可能已經知道web服務器中的JSF以webbrowser中的HTML結尾。在HTML中，有幾種方法可以水平放置元素（最終以CSS的幫助）：

1. 集團他們內聯元素（如<span>或display: inline;任何元素）。
2. 將它們分組爲塊元素（如<div>或任何具有display: block;的元素）和給它們全部爲float: left;。

該JSF <h:panelGrid>渲染HTML <table>元件，其中每個子組件被取爲<td>。 columns屬性表示單個<tr>中的最大數量<td>元素（以便<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">，而不是和他們的CSS一個float: left;。