如何在selectOneButton中的按鈕之間添加空間

我使用selectOneButton，並且我想在按鈕之間添加空間，並且如果可能的話更改選擇背景顏色，請告知如何做到這一點，謝謝。如何在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>

來源

2013-04-28 Mahmoud Saleh

這只是一個重寫CSS樣式到這個對象的問題，它將更容易提供呈現的HTML內容。 – 2013-04-28 09:06:16

您可以使用Chrome的Inspect元素功能獲取css'class，然後覆蓋它們。 – 2013-04-28 09:08:26

您可以嘗試：.ui-button.ui-widget.ui-state-default.ui-button-text-only {margin-left：10px！important;} – 2013-04-28 09:11:37

一個例子：

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-28 09:17:45 Kevin

您可以使用「檢查元素」功能（瀏覽器，火狐，...），以獲得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-28 09:20:10

你可以試試這個太：

<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-03 21:57:16 Murasame

如何在selectOneButton中的按鈕之間添加空間

回答

相關問題