Mozilla FirefoxでHTMLの `legend`要素を表のセルにするにはどうすればいいですか？

Question

Mozilla FirefoxでHTML legend要素を表のセルにするにはどうすればよいですか？ （私は、任意のブラウザでこれを行う方法を見つけ出すことはできませんが、私はFirefoxのための機能を必要とする。）

を、彼らはthとtr要素であるかのように、私は複数のfieldset要素で複数のlegendの要素を揃えるために、この機能が必要それぞれ、

次のコードは、legendとfieldsetで実現できないような所望のレイアウトを第2〜第6のdiv要素が示している例です。

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

HTMLタグlegendにfloat: left;を追加します。

* { 
 
    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>