css - 在生成的表中排列元素

Question

selectOneRadio JSF 中的元素被转换为表格，其中单选按钮及其标签放在同一个 <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> 中的单个元素，并且在没有 Bootstrap 的情况下并排渲染。

Answer 1

那是因为 <label>由于 Bootstrap CSS 已成为 HTML block element它自然地从一个新行开始。

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

td label {
    display: inline;
}