如何对齐按钮垂直

问题描述 投票:2回答:1

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

目前,我的代码是:

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

唯一的问题是现在的电网是页面的大小,任何方式这可以对准左,仅由LABES的大小?

html css jsf primefaces xhtml
1个回答
6
投票

使用上layoutp:selectOneRadio属性与价值pageDirection

下面是layout可能的值:

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

Example

© www.soinside.com 2019 - 2024. All rights reserved.