html - 如何垂直对齐按钮

Question

大家好，我有几个单选按钮，我想要垂直的，但我似乎只能得到水平的。

目前我的代码是:

            <p:panelGrid columns="1">
                <p:selectOneRadio id="options" value="{formBean.number}">  
                    <f:selectItem itemLabel="0 - 19" itemValue="1" /> 
                    <!-- Add in the help button by the side of each item once its lined up, use a grid ?
                    <p:button icon="ui-icon-help" title="Help">  
                    </p:button> -->
                    <f:selectItem itemLabel="20 - 39" itemValue="2" />  
                    <f:selectItem itemLabel="40 - 49" itemValue="4" />  
                    <f:selectItem itemLabel="50 - 59" itemValue="5" />
                    <f:selectItem itemLabel="60 - 69" itemValue="6" />  
                    <f:selectItem itemLabel="70 - 79" itemValue="7" />  
                    <f:selectItem itemLabel="80 - 100" itemValue="8" />  
                </p:selectOneRadio>  
            </p:panelGrid>

如何将它从水平更改为垂直，我已经尝试了网格方式但还是一样。

谢谢大家

编辑

我现在已经实现了我设定的目标:

            <p:panelGrid columns="1">
                <p:selectOneRadio id="options" value="{formBean.number}" layout="grid" columns="1" required = "True"
                              requiredMessage="#{bundle.requiredGender}"> 
                    <f:selectItem itemLabel="0 - 19" itemValue="1" /> 

                    <f:selectItem itemLabel="20 - 39" itemValue="2" />  
                    <f:selectItem itemLabel="40 - 49" itemValue="4" />  
                    <f:selectItem itemLabel="50 - 59" itemValue="5" />
                    <f:selectItem itemLabel="60 - 69" itemValue="6" />  
                    <f:selectItem itemLabel="70 - 79" itemValue="7" />  
                    <f:selectItem itemLabel="80 - 100" itemValue="8" />  
                </p:selectOneRadio>  
            </p:panelGrid>

现在唯一的问题是网格是页面的大小，任何方式都可以将其左对齐并仅制作标签的大小？

Answer 1

在 p:selectOneRadio 上使用 layout 属性，值为 pageDirection。

layout 的可能值如下:

• lineDirection - 用于水平方向
• pageDirection - 垂直方向。
• grid - 对于网格模式
• pageDirection - 垂直方向。
• responsive - 动态使用提供的空间
• custom - 用于自定义布局。

Example