提问人：mnemotronic 提问时间：9/28/2018 最后编辑：Victoria Ruizmnemotronic 更新时间：2/22/2022 访问量：41
为什么顺序 TABLE 元素显示在浏览器的新行上？
Why are sequential TABLE elements displayed on new lines in browser?
问：
我有 4 个标签 + 单选按钮，我想在同一行上彼此相邻显示：
+--------+ +--------+ +--------+ +--------+
| NONE | | NO | | Yes | | N/A |
+--------+ +--------+ +--------+ +--------+
| Button | | Button | | Button | | Button |
+--------+ +--------+ +--------+ +--------+
取而代之的是，每个标签 + 按钮都会在浏览器（Chrome 或 MSIE 11）中单独显示一行。HTML 中没有显式换行符元素。为什么他们要走上自己的路线，我如何让他们在一起？ 这是 COTS 产品中表单的一部分。我无法完全控制生成的 HTML、CSS 或 JS。
作为一个额外的奖励问题，为什么jQuery会自动在我的TABLE中添加TBODY元素？我没有这样做。
这是我用jQuery生成的HTML：
<span id="F1538.wrapper" class="fieldWidget">
<table><tbody>
<tr><td><label for="F1538">(None)</label></td></tr>
<tr><td><input type="radio" name="F1538" value="0" checked="checked"></td></tr>
</tbody></table>
<table><tbody>
<tr><td><label for="F1538">No</label></td></tr>
<tr><td><input type="radio" name="F1538" value="782"></td></tr>
</tbody></table>
<table><tbody>
<tr><td><label for="F1538">Yes</label></td></tr>
<tr><td><input type="radio" name="F1538" value="783"></td></tr>
</tbody></table>
<table><tbody>
<tr><td><label for="F1538">N/A</label></td></tr>
<tr><td><input type="radio" name="F1538" value="784"></td></tr>
</tbody></table>
</span>答：
3赞
Victoria Ruiz
9/28/2018
#1
这不是表的工作方式。
首先，每个元素都是一个块元素，所以除非特别告诉不要这样做，否则表格后面的下一个元素将显示在它下面。<table>
在表格中，每个表格都代表一个表格行（它们堆叠在一起）。在每一行中，每个行都代表该行的一列（它们在该行中彼此相邻显示）。<tr><td>
如果你真的想使用 ，你必须把标签放在第一个按钮上，把所有按钮放在第二个按钮上。<table><tr>
您可能想探索其他选项（大多数人会说您绝对应该这样做，因为从语义上讲，这不是表格的用途）。您可以使用 4 ，每个都包含标签 + 按钮，并使它们彼此相邻，或用于实现相同的效果。divsfloatflex
评论
0赞
connexo
9/28/2018
很好的解释涵盖了每个相关方面！
0赞
mnemotronic
9/28/2018
多亏了@Victoria Ruiz，我才有了一个“嗯，呃”的时刻。（现在）显而易见的答案是 1 个表格，2 行（第一行是标签，第二行是按钮），每行 4 个单元格。由于时间限制，我不愿尝试基于 DIV/SPAN 或 CSS 的方法，我知道如何使用表格来做到这一点，并且解决方案必须在表格密集型 COTS 框架内工作。
评论
<tr>...</tr><span>是一个内联元素，但是一个块级元素。我认为你会想将CSS用于父元素（应该是或代替）。<table>display: flex;<div><section>