在生成的表中排列元素

Question

JSF中的selectOneRadio元素被转换为表格，其中单选按钮及其标签放在表格中的同一<td>内。

<!-- JSF Element -->
<h:selectOneRadio id="types" label="Type"
    value="#{bean.selectedType}"
    layout="pageDirection">
    <f:selectItems value="#{bean.types}"/>
</h:selectOneRadio>

<!-- Generated HTML -->
<table id="j_id_i:types">
    <tbody>
         <tr>
             <td>
                 <input id="j_id_i:types:0" type="radio" value="VALUE1"
                     name="j_id_i:types"/>
                 <label for="j_id_i:types:0"> Value #1</label>
             </td>
         </tr>
         <tr>...</tr>
         ...
    </tbody>
</table>

在我使用Bootstrap之前，<td>中的元素会并排显示，但现在看起来相互不同。

元素的已处理CSS如下所示，由Firebug提供。

table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
}
html {
    font-size: 100%;
}

我不知道可能产生这种行为的原因。这不是宽度的问题，因为这是<div>中的单个元素，没有引导程序它是并排渲染。

Answer 1

那是因为<label>由于Bootstrap CSS而成为HTML block element，它自然地在新行开始。

您需要再次将其设为HTML inline element。因此，您需要相应地覆盖Bootstrap CSS。也许您只想将它​​应用于表格单元格中的标签。 E.g。

td label {
    display: inline;
}