右对齐一行

Question

我有一个JSF表，左边对齐所有行。但我想在一行上应用正确的对齐方式。我试过这个：

 <h:panelGroup styleClass="table-right">
       <h:selectBooleanCheckbox value="#{bean.method}"> </h:selectBooleanCheckbox>
 </h:panelGroup>

.table-right {
    text-align: rigth;
}

但它没有用。将CSS类应用于一个h：panelGroup并在右侧对齐它的内容的正确方法是什么？

Answer 1

如果您检查html，则会看到h:panelGroup呈现为<span>。

span-tag是一个内联元素，意味着它将尽可能小，并且您无法在其上设置宽度。如果将border: 1px solid black;添加到styleClass，则可以验证这一点。它对容器中的左对齐或右对齐没有影响，这足够大了。

我认为你可以通过制作panelGroup block / inline-block元素并在其上加一个宽度来解决它：

display: inline-block;
width: 100%;