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

【问题标题】：How to add space between buttons in selectOneButton如何在 selectOneButton 中的按钮之间添加空格
【发布时间】：2013-04-28 09:02:43
【问题描述】：

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

【问题讨论】：

只需要覆盖这个对象的 CSS 样式，提供渲染的 HTML 内容会更容易。
你可以通过Chrome的Inspect element函数获取css'class，然后覆盖它们。
你试试：.ui-button.ui-widget.ui-state-default.ui-button-text-only{margin-left:10px !important;}

标签： css jsf primefaces

【解决方案1】：

一个例子：

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。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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）并为这些按钮测试一些内联样式。这样，您将绝对确定您希望它们如何间隔；)

【讨论】：