2

我正在使用 selectOneButton，我想在按钮之间添加空格，如果可能的话更改选择背景颜色，请告知如何做到这一点，谢谢。

这是代码：

    <p:selectOneButton value="#{buttonBean.number}">  
        <f:selectItem itemLabel="Option 1" itemValue="1" />  
        <f:selectItem itemLabel="Option 2" itemValue="2" />  
        <f:selectItem itemLabel="Option 3" itemValue="3" />  
    </p:selectOneButton>
4

3 回答 3

6

一个例子：

body .ui-buttonset .ui-button {
    margin-right: 10px;
}

在body那里，该规则比primefaces规则更具体。

或者，您可以像这样包含您的样式表：

     <f:facet name="last">
        <!-- Runs after primefaces css. I can't get <outputStylesheet/> to work here, however. -->
        <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/index.css"/>
    </f:facet>

这允许同样特定的样式覆盖primefaces 样式。

您将需要查阅浏览器中的 HTML/CSS 检查工具来确定要使用的 CSS。

于 2013-04-28T09:17:45.477 回答
0

您可以使用“检查元素”功能（Chrome、Firefox、..）来获取 Css'class，然后根据您的情况覆盖它们：

<stype type="text/css">
.ui-button.ui-widget.ui-state-default.ui-button-text-only.ui-corner-right{
margin-left:10px !important;
}
.ui-button.ui-widget.ui-state-default.ui-button-text-only{
margin-left:10px !important;
}
</style>
于 2013-04-28T09:20:10.027 回答
0

你也可以试试这个：

<p:selectOneButton value="#{buttonBean.number}">  
    <f:selectItem itemLabel="Option 1" itemValue="1" style="padding-right: 1em;"/>  
    <f:selectItem itemLabel="Option 2" itemValue="2" style="padding-right: 1em;"/>  
    <f:selectItem itemLabel="Option 3" itemValue="3" style="padding-right: 1em;"/>  
</p:selectOneButton>

此解决方案的问题是您需要将该样式放入您想要分隔的每个按钮中。

另一种选择是在你的css中给那个样式规则一个类，然后为你想要应用这个规则的每个按钮引用它。

根据我的个人经验，我会使用 Chrome 检查工具（或 Firebug）并为这些按钮测试一些内联样式。这样，您将绝对确定您希望它们如何间隔；）

于 2013-05-03T21:57:16.190 回答