css - 如何在primefaces selectManyCheckbox->selectItems->label上应用样式？

Question

我有一个带有动态内容的 primefaces selectManyCheckbox 元素：

<p:selectManyCheckbox
    id="mySelectManyCheckbox"
    value="#{myView.mySelectManyCheckboxValue}"
    layout="responsive"
    columns="1"
>
    <f:selectItems
        value="#{myView.myCollectionOfCheckBoxes}"
        var="singleCheckbox"
        itemLabel="#{singleCheckbox.description}"
        itemValue="#{singleCheckbox.id}"
    />
</p:selectManyCheckbox>

我面临一个 CSS 问题，当标签太长时，它会位于复选框元素的下方。

有没有办法在复选框上显示标签并中断？像这样更好地理解：

标签： cssjsfprimefacesstyles

Answer 1

在阅读了如何一致地跨浏览器对齐复选框及其标签后，我能够尝试适合我的问题的解决方案。我想正确的解决方案取决于来自各种 css 的其余样式。

无论如何对我来说工作：

body .ui-selectmanycheckbox label {
    margin-top: -22px !important;
    display: block !important;
    padding-left: 20px !important;
}

上面的链接非常详尽，我建议尝试这些解决方案的一些组合，以解决任何有类似问题的人。