如何在 Mozilla Firefox 中将 HTML“legend”元素设置为表格单元格样式？

Question

如何legend在 Mozilla Firefox 中将 HTML 元素设置为表格单元格样式？（我不知道如何在任何浏览器中执行此操作，但我只需要 Firefox 的功能。）

我需要此功能来对齐多个元素legend中的多个元素fieldset，就好像它们分别是th和tr元素一样。

以下代码是一个示例，其中第二个到第六个div元素演示了我似乎无法使用legendand实现的所需布局fieldset。

元素后面有一个不需要的换行符legend，我似乎无法删除它，并且给定的display: table-cell样式不应该存在该换行符。

* {
  all: unset;
}

 ::before,
 ::after {
  all: unset;
}

html {
  margin: 3rem;
}

style {
  display: none;
}

h1 {
  display: block;
  font-weight: bolder;
  margin-bottom: 0.25rem;
}

body > div {
  display: table;
}

fieldset,
body > div > div {
  display: table-row;
  margin-bottom: 1rem;
  outline: 1px solid blue;
}

legend,
span,
div > div > div {
  display: table-cell;
  outline: 1px solid red;
}

input {
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

<h1>bad: tabular <code>fieldset</code> and <code>legend</code></h1>
<div>
  <fieldset>
    <legend><label for="checkbox.1">Label for Checkbox</label></legend>
    <span><input id="checkbox.1" type="checkbox"></span>
  </fieldset>
  <fieldset>
    <legend><label for="checkbox.2">Label for Checkbox; Checkboxes Should Line Up</label></legend>
    <span><input id="checkbox.2" type="checkbox"></span>
  </fieldset>
</div>
<h1>good: tabular <code>div</code> and <code>div</code></h1>
<div>
  <div>
    <div><label for="checkbox.3">Label for Checkbox</label></div>
    <span><input id="checkbox.3" type="checkbox"></span>
  </div>
  <div>
    <div><label for="checkbox.3">Label for Checkbox; Checkboxes Should Line Up</label></div>
    <span><input id="checkbox.3" type="checkbox"></span>
  </div>
</div>

Answer 1

添加float: left;到 HTMLlegend标签。

* {
  all: unset;
}
html {
  margin: 3rem;
}
style {
  display: none;
}
h1 {
  display: block;
  font-weight: bolder;
  margin-bottom: 0.25rem;
}
fieldset,
body > div {
  display: table-row;
  margin-bottom: 1rem;
  outline: 1px solid blue;
}
legend,
span,
div > div {
  display: table-cell;
  outline: 1px solid red;
}
legend {
  float: left;
}
input {
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

<h1>bad: tabular <code>fieldset</code> and <code>legend</code></h1>
<fieldset>
  <legend><label for="checkbox.1">Label for Checkbox</label></legend><span><input id="checkbox.1" type="checkbox"></span>
</fieldset>
<h1>good: tabular <code>div</code> and <code>div</code></h1>
<div>
  <div><label for="checkbox.2">Label for Checkbox</label></div>
  <span><input id="checkbox.2" type="checkbox"></span>
</div>