Question

我正在使用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>

Answer 1

一个例子：

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

body就在那里，因此规则更具体，即主要规则。

或者，您可以包含样式表，如下所示：

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

Answer 2

你可以使用“Inspect element”功能（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>

Answer 3

你也可以试试这个：

<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），并为这些按钮测试一些内联样式。这样你就可以绝对确定你希望它们如何间隔;）

如何在selectOneButton中的按钮之间添加空格

3 个答案: