css - 可以控制自动生成的标签的方式显示？

Question

我有一个显示在 a 中的选项的动态列表<h:selectOneRadio>，我想控制标签布局，因此当标签大于一行时，它的行为如下：

实际行为：

    [ ] Label 1

    [ ] This label really 
    bugs me!

    [ ] Label 3

期望的行为：

    [ ] Label 1

        Now...This is a nice     
    [ ] Label, Label, label, 
        Label, Label, label ...

    [ ] Label 3

JSF 生成的简化 HTML：

<table>
    <tbody>
        <tr>
            <td>
                <input id="radio 1" type="radio"> 
                <label for="radio 1"> Label 1 </label>
            </td>
            <td>
                <input id="radio 2" type="radio"> 
                <label for="radio 2"> This Label really bugs me! </label>
            </td>
            <td>
                <input id="radio 3" type="radio"> 
                <label for="radio 3"> Label 3 </label>
            </td>
        </tr>
    </tbody>
</table>

更新：对不起=X，我需要一些稍微不同的东西......

Answer 1

假设您正在使用layout="pageDirection"垂直放置列表并且可以使列表具有固定宽度，您可以执行以下操作：

_{免责声明：仅在 FF 和 Chrome 中测试}

<style>
.select-one {
   width: 200px;
}
.select-one label {
   float: right;
   width: 170px;
}
</style>
...
<h:selectOneRadio value="#{myBacking.ola}" layout="pageDirection"
     styleClass="select-one">
        <f:selectItem itemLabel="This label really bugs me" itemValue="one" />
        <f:selectItem itemLabel="This label really, really, REALLY bugs me!!
                                 And let's add more stuff into this"
                      itemValue="two" />
</h:selectOneRadio>

这是它在 Firefox 中的呈现方式：

您可能需要width稍微调整一下 CSS 定义的值，以使其符合您的口味。