p:column 内的右对齐包含 p:panelGrid答案

【问题标题】：Right alignment inside a p:column holding a p:panelGridp:column 内的右对齐包含 p:panelGrid
【发布时间】：2014-07-25 13:11:32
【问题描述】：

鉴于以下<p:panelGrid>。

<p:panelGrid style="width: 25%;">
    <p:row>
        <p:column style="text-align: right;">
            a
        </p:column>
    </p:row>
</p:panelGrid>

<p:column> 中的文本右对齐，如下所示。

我需要在<p:column> 中显示另一个<p:panelGrid>，如下所示。

<p:panelGrid style="width: 25%;">
    <p:row>
        <p:column style="text-align: right;">
            <p:panelGrid>
                <p:row>
                    <p:column>
                        b
                    </p:column>
                </p:row>
            </p:panelGrid>
        </p:column>
    </p:row>
</p:panelGrid>

<p:column> 的样式属性text-align: right; 在这种情况下无效。

内部<p:panelGrid>如何对齐？

【问题讨论】：

你试过style="margin-right:0%"
无论如何我都必须使用float: right :)

标签： css jsf primefaces jsf-2.2

【解决方案1】：

由于panelGrid 是一个表格，您可以将其浮动到右侧：

 <p:panelGrid style="width: 25%;">
    <p:row>
       <p:column>
           <p:panelGrid style="float: right">
               <p:row>
                   <p:column>
                       b
                   </p:column>
               </p:row>
           </p:panelGrid>
       </p:column>
   </p:row>
 </p:panelGrid>

【讨论】：

【解决方案2】：

在内部 panelgrid 上应用样式

<p:panelGrid style="text-align: right; display:inline-block">

【讨论】：

添加此样式属性display:inline-block 不起作用。

【解决方案3】：

为面板添加类并应用如下样式。

 <p:panelGrid style="width: 25%;" styleClass="mytest">
 <p:row>
    <p:column>
        <p:panelGrid>
            <p:row>
                <p:column>
                    b
                </p:column>
            </p:row>
        </p:panelGrid>
    </p:column>
 </p:row>
</p:panelGrid>

CSS

.mytest td
{
  text-align:right;
}

如果不起作用，请尝试以下操作。

.mytest td
{
  float:right;
}

【讨论】：

外部<p:panelGrid> 实际上包含的行/列比问题中显示的要多。将此 CSS 应用于外部 <p:panelGrid> 会使它们完全对齐，这是不希望的。并非所有行/列都应正确对齐。右对齐应仅适用于内部<p:panelGrid>。此外，float : right 在这种情况下是不受欢迎的，这会改变<p:panelGrid> 的外观。