如何在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 问题，当标签太长时，它会位于复选框元素的下方。

是否有任何方法可以在复选框中显示标签并中断？像这样更好地理解：

Answer 1

阅读How to align checkboxes and their labels consistently cross-browsers 后，我能够尝试适合我的问题的解决方案。我想正确的解决方案取决于来自各种 css 的其余样式。

无论如何对我来说都有效：

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

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

Answer 2

您还可以将样式应用于 td 以避免边距和填充调整

    .ui-selectmanycheckbox.ui-widget td, .ui-selectoneradio.ui-widget td {
    border: 0 none;
    white-space: nowrap;
}