如何在HTML Mozilla Firefox中將HTML“legend”元素設置為表格單元格？

Question

如何在HTML Mozilla Firefox中將HTML legend元素設置為表格單元格？ （我無法弄清楚如何在任何瀏覽器中執行此操作，但我只需要Firefox的功能。）

我需要這個功能來對齊多個legend中的多個元素fieldset ，好像他們是元素th和tr元素，分別。

下面的代碼是一個示例，其中第二個到第六個div元素演示了我用legend和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; 到HTML legend標記。

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