css - 自動生成されたラベルの方法を制御することが可能です表示されますか？

Question

に表示されるオプションの動的リストがあり<h:selectOneRadio>、ラベルのレイアウトを制御したいので、ラベルが 1 行よりも大きい場合、次のように動作します。

実際の動作:

    [ ] 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定義の値を少しいじる必要があるかもしれません。