Question

为了删除Primefaces TabView组件的Tab中的填充，我在我的css文件上创建了一个新样式：

.tabviewleft .ui-tabs .ui-tabs-panel {
    padding: 0px 0px;
}

然后我尝试将这种新样式应用于Tab。但它不起作用：

<p:tab id="fieldCategoryTab" title="category" styleClass="tabviewleft" >

然后我尝试应用TabView组件。但它也不起作用：

<p:tabView id="tabViewLeft" styleClass="tabviewleft">

然后我在TabView之外创建了一个div，它起作用了：

<div id="teste" class="tabviewleft">

为什么我需要在TabView外部创建一个div来应用样式？

是否可以直接将其应用于Tab或TabView而无需创建div？

提前感谢您的任何解释。

Answer 1

是的，这是可能的。假设您的<p:tabView>结构如下：

<p:tabView id="tabView" styleClass="tabView" dynamic="true" 
    cache="false"> 

    <p:tab title="#{trhBundle['paidLeave']}" id="paid">
       <h:form>
       </h:form>
    </p:tab>

    <p:tab title="#{trhBundle['RTT']}" id="rtt">
       <h:form>
       </h:form>
    </p:tab>

    <p:tab title="#{trhBundle['specialLeave']}" id="special">
       <h:form>
       </h:form>
    </p:tab>
</p:tabView>

然后添加css

.tabView .ui-tabs-panel {
padding: 0px!important;
}

我认为这会删除<p:tab>的所有填充。

primefaces样式仅适用于嵌套元素

1 个答案: