Question

.ui-orderlist .ui-orderlist-list {
    height: auto;
}

是否应将列表高度设置为自动？因为它不起作用。在浏览器样式中显示为

.ui-orderlist .ui-orderlist-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    height: 200px;
    width: 200px;
}
.ui-orderlist .ui-orderlist-list {
    height: auto; // this line no active
}

Answer 1

您可以通过使css规则比默认的primefaces规则更具体来覆盖css规则，从而提供更多＆＃34; weight＆＃34;为您的自定义规则。例如，使用< div class="some_class">< p:orderList ... />< /div>打包您的订单列表，并提供css规则，如：

div.some_class .ui-orderlist .ui-orderlist-list {
    height: auto;
}

您可以阅读有关css特异性here和here的更多信息。

或者，您可以在自定义规则中添加!important例外，例如：

.ui-orderlist .ui-orderlist-list {
    height: auto !important;
}

虽然不推荐使用这种方法，但应该使用（如评论中提到的@Kukeltje）作为最后的选择。

Answer 2

前几天我遇到了同样的问题。您必须确保在默认的PrimeFaces CSS之后加载样式表。您可以通过以下方式包含样式表来实现此目的：

<h:head>
    <f:facet name="last">
        <link type="text/css" rel="stylesheet" href="/css/yourstyle.css"></link>
    </f:facet>
</h:head>

PS：请不要使用!important。

Primefaces css覆盖自定义css

2 个答案: