Question

我有4个标签+单选按钮，要在同一行上彼此相邻显示：

+--------+ +--------+ +--------+ +--------+
|  NONE  | |   NO   | |   Yes  | |  N/A   |
+--------+ +--------+ +--------+ +--------+
| Button | | Button | | Button | | Button |
+--------+ +--------+ +--------+ +--------+

相反，每个“标签+按钮”都将进入浏览器中的单独一行（Chrome或MSIE 11）。 HTML中没有明确的换行元素。他们为什么要走自己的路，我如何保持他们在一起？这是COTS产品中表格的一部分。我对生成的HTML，CSS或JS没有完全控制。

作为一个额外的奖励问题，为什么jQuery会在表中自动添加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>

Answer 1

这不是表格的工作方式。

首先，每个<table>都是一个块元素，因此，除非明确告知，否则表后的下一个元素将显示在其下方。

在表中，每个<tr>代表一个表行（它们相互堆叠）。并且在每一行中，每个<td>代表该行的一列（它们在该行中彼此相邻显示）。

如果您确实要使用<table>，则必须将标签放在第一个<tr>中，所有按钮都放在第二个中。

您可能想探索其他选项（大多数人会说您绝对应该，因为从语义上讲，这不是表的用途）。您可以使用4个divs，每个包含标签+按钮，并使它们float彼此相邻，或使用flex达到相同的效果。

为什么连续的TABLE元素显示在浏览器的新行中？

1 个答案: