Question

我想要设置p:message 单 display: inline-block。

我尝试过以下方法：

<p:message ... styleClass="inline-block" style="display:inline-block;/>

但是当我看到源代码时，样式和类都不会在带有消息的div上呈现。

有没有办法直接为p:message 指定自定义CSS属性？

我知道我可以用div包装它并操纵那个div的孩子们的CSS，但如果可能的话，我想避免多余的包装。

PrimeFaces版本：3.5。

Answer 1

不得不同意Hatem Alimam

正如mykong article所示，您应该添加样式表以覆盖Primefaces CSS。

CSS样式表中的

!important被视为不良做法。检查这些快速的SO答案，看看SO社区的想法：

最后一个答案可以为!important提供答案，但是当多个!important规则发挥作用时会产生问题（如果你开始无保留地使用它，你一定会拥有它吹在你的脸上，他们开始一个接一个地级联。

正确的方法是让你的样式表优先于PF表，使你的选择器优先于级联中PF的那些。

谷歌针对CSS选择器的特殊性更多关于如何确保浏览器通过PF选择您的规则（我现在在工作，无法访问博客）。

根据您的具体问题：

属性不起作用，因为它们未在组件中编码。查看PF用户指南了解您的特定PF版本（在撰写本文时，您尚未说明您的版本）。 <p:messages>组件有一种相当特殊的渲染方式。

根据您的具体情况，添加以下规则：

.ui-messages.ui-widget {
    display: inline-block;
}